saber/src/views/system/announcement.vue

<template>
  <div class="hc-system-announcement-box">
    <div class="classify-card">
      <div class="card-body">
        <div class="card-main">
          <div class="header">
            <div class="title">系统分类</div>
            <div class="extra">
              <el-button icon="el-icon-plus" size="mini" type="primary" @click="addSystemClick"></el-button>
            </div>
          </div>
          <div class="content">
            <el-menu :default-active="systemClassify" class="classify-data" @select="systemClassifySelect">
              <el-submenu index="1">
                <div slot="title">
                  <div @contextmenu.prevent="editSystemClick($event, '1')">电子档案系统</div>
                </div>
                <el-menu-item index="1-1"  @contextmenu.native.prevent="editSystemClick($event, '1-1')">质检系统</el-menu-item>
                <el-menu-item index="1-2"  @contextmenu.native.prevent="editSystemClick($event, '1-2')">档案系统</el-menu-item>
                <el-menu-item index="1-3"  @contextmenu.native.prevent="editSystemClick($event, '1-3')">计量系统</el-menu-item>
              </el-submenu>
              <el-submenu index="2">
                <div slot="title">
                  <div @contextmenu.prevent="editSystemClick($event, '2')">规发中心</div>
                </div>
                <el-menu-item index="2-1"  @contextmenu.native.prevent="editSystemClick($event, '2-1')">数据分析系统</el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
        </div>
      </div>
    </div>
    <div class="data-card">
      <div class="card-body">
        <div class="card-main">
          <div class="header">
            <div class="title">
              <div style="width: 140px">
                <el-select v-model="searchForm.type" class="block" clearable filterable placeholder="请选择公告类型" size="small">
                  <el-option label="系统发布公告" value="1"></el-option>
                  <el-option label="系统说明公告" value="2"></el-option>
                </el-select>
              </div>
              <div style="width: 100px; margin-left: 12px; margin-right: 12px;">
                <el-select v-model="searchForm.state" class="block" clearable filterable placeholder="发布状态" size="small">
                  <el-option label="已发布" value="1"></el-option>
                  <el-option label="待发布" value="2"></el-option>
                  <el-option label="已取消" value="3"></el-option>
                </el-select>
              </div>
              <el-button size="small" type="primary">搜索</el-button>
            </div>
            <div class="extra">
              <el-badge :value="3" style="margin-right: 18px;">
                <el-button size="small" @click="releasedShow">待发布</el-button>
              </el-badge>
              <el-button size="small" type="primary" @click="generalShow">发布普通公告</el-button>
              <el-button size="small" type="warning" @click="systemUpdateShow">发布系统公告</el-button>
              <el-button size="small" type="danger">批量删除公告</el-button>
            </div>
          </div>
          <div class="content">
            <el-table ref="tableRef" :data="tableData" border style="width: 100%;" height="100%" @selection-change="tableSelection">
              <el-table-column type="selection" width="50" align="center" fixed="left"></el-table-column>
              <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
              <el-table-column prop="type" label="公告类型" width="140"></el-table-column>
              <el-table-column prop="name" label="公告内容" min-width="240"></el-table-column>
              <el-table-column prop="address" label="发布备注" width="300"></el-table-column>
              <el-table-column prop="time" label="创建时间" width="180"></el-table-column>
              <el-table-column prop="user" label="创建人" width="100"></el-table-column>
              <el-table-column prop="date" label="取消时间" width="180"></el-table-column>
              <el-table-column prop="state" label="发布状态" width="100" align="center">
                <template slot-scope="{row}">
                  <el-tag type="danger" effect="dark" v-if="row.state==='已取消'">{{ row.state }}</el-tag>
                  <el-tag type="success" effect="dark" v-if="row.state==='已发布'">{{ row.state }}</el-tag>
                  <el-tag type="info" effect="dark" v-if="row.state==='待发布'">{{ row.state }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="action" label="操作" width="150" align="center" fixed="right">
                <template slot-scope="{row, $index}">
                  <el-button size="mini" @click="handleEdit($index, row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete($index, row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="action">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchForm.current"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="searchForm.size"
              layout="total, prev, pager, next, sizes, jumper"
              :total="searchForm.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <!--新增/编辑 系统-->
    <el-dialog
      class="hc-system-announcement-dialog"
      :title="`${systemInfoData.id?'编辑':'新增'}系统`"
      :visible.sync="isSystemInfoShow"
      append-to-body center
      destroy-on-close
      width="400px"
      @closed="systemFormCancel"
    >
      <el-form :model="systemInfoData" :rules="systemInfoRules" ref="systemInfoRef" label-width="auto">
        <el-form-item label="数据类型：" prop="type">
          <el-radio-group v-model="systemInfoData.type">
            <el-radio label="1">系统分组</el-radio>
            <el-radio label="2">项目系统</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分组名称：" prop="name" v-if="systemInfoData.type === '1'">
          <el-input v-model="systemInfoData.name" placeholder="请输入分组名称"></el-input>
        </el-form-item>
        <el-form-item label="上级分组：" prop="groupId" v-if="systemInfoData.type === '2'">
          <el-select v-model="systemInfoData.groupId" class="block" clearable filterable placeholder="请选择上级分组">
            <el-option label="电子档案系统" value="1"></el-option>
            <el-option label="规发中心" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联应用：" prop="client" v-if="systemInfoData.type === '2'">
          <el-select v-model="systemInfoData.client" class="block" clearable filterable placeholder="请选择关联应用">
            <el-option label="client（质检试验）" value="client"></el-option>
            <el-option label="archives（档案管理）" value="archives"></el-option>
            <el-option label="measure（计量系统）" value="measure"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称：" prop="title" v-if="systemInfoData.type === '2'">
          <el-input v-model="systemInfoData.title" placeholder="请输入项目名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="systemFormCancel">取消</el-button>
        <el-popconfirm title="确定要删除当前数据吗？" @confirm="systemFormDel" v-if="systemInfoData.id">
          <el-button slot="reference" type="danger">删除</el-button>
        </el-popconfirm>
        <el-button type="primary" @click="systemFormSubmit">确定</el-button>
      </div>
    </el-dialog>

    <!--待发布-->
    <el-dialog
      class="hc-system-announcement-dialog black-card" title="待发布的公告" :visible.sync="isReleasedShow"
      append-to-body center destroy-on-close width="620px" @closed="releasedCancel"
    >
      <el-divider content-position="left" class="hc-system-announcement-black-divider top">系统公告</el-divider>
      <div class="hc-system-announcement-black-card">
        <div class="icon-box">
          <div class="name">前 端</div>
          <div class="icon">
            <i class="iconfont iconicon_notice"></i>
          </div>
        </div>
        <div class="content">
          <div class="top-box">
            <div class="left">
              <span class="name">待发布：</span>
              <span class="num">1</span>
            </div>
            <div class="right">
              <span class="name">创建人：</span>
              <span class="user">黄飞鸿</span>
            </div>
          </div>
          <div class="time-box">
            <span class="name">发布时间：</span>
            <span class="time">2024年7月31日 14:40:30</span>
          </div>
        </div>
      </div>
      <div class="hc-system-announcement-black-card">
        <div class="icon-box">
          <div class="name">后 端</div>
          <div class="icon">
            <i class="iconfont iconicon_notice"></i>
          </div>
        </div>
        <div class="content">
          <div class="top-box">
            <div class="left">
              <span class="name">待发布：</span>
              <span class="num">1</span>
            </div>
            <div class="right">
              <span class="name">创建人：</span>
              <span class="user">祝炜</span>
            </div>
          </div>
          <div class="time-box">
            <span class="name">发布时间：</span>
            <span class="time">2024年7月31日 14:40:30</span>
          </div>
        </div>
      </div>
      <el-divider content-position="left" class="hc-system-announcement-black-divider">普通公告</el-divider>
      <div class="hc-system-announcement-black-card">
        <div class="icon-box">
          <div class="name">公 告</div>
          <div class="icon">
            <i class="iconfont iconicon_notice"></i>
          </div>
        </div>
        <div class="content">
          <div class="top-box">
            <div class="left">
              <span class="name">待发布：</span>
              <span class="num">1</span>
            </div>
            <div class="right">
              <span class="name">创建人：</span>
              <span class="user">豆海涛</span>
            </div>
          </div>
          <div class="text-box">
            <div class="name">公告内容：</div>
            <div class="text">系统xxxxxx</div>
          </div>
          <div class="time-box">
            <span class="name">发布时间：</span>
            <span class="time">2024年7月31日 14:40:30</span>
          </div>
        </div>
      </div>
    </el-dialog>

    <!--发布普通公告-->
    <el-dialog
      class="hc-system-announcement-dialog w-700px" title="发布普通公告" :visible.sync="isGeneralShow"
      width="700px" append-to-body center destroy-on-close @closed="generalCancel"
    >
      <el-form :model="generalFormModel" :rules="generalFormRules" ref="generalFormRef" class="hc-system-announcement-form" label-position="top">
        <el-form-item label="公告内容：" prop="key">
          <el-input type="textarea" v-model="generalFormModel.key" rows="3"></el-input>
        </el-form-item>
        <el-form-item label="发布备注：" prop="desc">
          <el-input type="textarea" v-model="generalFormModel.desc"></el-input>
        </el-form-item>
        <el-form-item label="发布配置：" prop="key1">
          <el-radio-group v-model="generalFormModel.key1">
            <el-radio label="0">现在</el-radio>
            <el-radio label="3">三分钟后</el-radio>
            <el-radio label="5">五分钟后</el-radio>
            <el-radio label="10">十分钟后</el-radio>
            <el-radio label="999">
              <el-date-picker v-model="generalFormModel.key1Val" type="datetime" placeholder="选择日期时间" size="small"></el-date-picker>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="公告停留时间：" prop="key2">
          <el-radio-group v-model="generalFormModel.key2">
            <el-radio label="1">一分钟</el-radio>
            <el-radio label="3">三分钟</el-radio>
            <el-radio label="5">五分钟</el-radio>
            <el-radio label="10">十分钟</el-radio>
            <el-radio label="999">
              <el-select v-model="generalFormModel.key2Val" clearable filterable size="small" style="width: 90px;">
                <el-option v-for="i in 60" :label="`${i}分钟`" :value="i"></el-option>
              </el-select>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="涉及系统：" prop="key3">
          <el-checkbox-group v-model="generalFormModel.key3">
            <el-checkbox label="1">质检系统</el-checkbox>
            <el-checkbox label="2">档案系统</el-checkbox>
            <el-checkbox label="3">计量系统</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="generalCancel">取消</el-button>
        <el-button type="primary" @click="generalFormSubmit">确定</el-button>
      </div>
    </el-dialog>

    <!--发布系统公告-->
    <el-dialog
      class="hc-system-announcement-dialog h-full w-700px" title="发布系统公告" :visible.sync="isSystemUpdateShow"
      width="700px" append-to-body center destroy-on-close @closed="systemUpdateCancel"
    >
      <el-form :model="updateFormModel" :rules="updateFormRules" ref="updateFormRef" class="hc-system-announcement-form" label-position="top">
        <el-form-item label="公告内容：" prop="key">
          <el-input type="textarea" v-model="updateFormModel.key" rows="3"></el-input>
        </el-form-item>
        <el-form-item label="发布备注：" prop="desc">
          <el-input type="textarea" v-model="updateFormModel.desc"></el-input>
        </el-form-item>
        <el-form-item label="更新类型：" prop="key4">
          <el-checkbox-group v-model="updateFormModel.key4">
            <el-checkbox label="1">前端页面</el-checkbox>
            <el-checkbox label="2">后端接口</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="更新原因：" prop="key5">
          <el-radio-group v-model="updateFormModel.key5">
            <el-radio label="1">新功能需求</el-radio>
            <el-radio label="2">bug修复</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发布配置：" prop="key1">
          <el-radio-group v-model="updateFormModel.key1">
            <el-radio label="0">现在</el-radio>
            <el-radio label="3">三分钟后</el-radio>
            <el-radio label="5">五分钟后</el-radio>
            <el-radio label="10">十分钟后</el-radio>
            <el-radio label="999">
              <el-date-picker v-model="updateFormModel.key1Val" type="datetime" placeholder="选择日期时间" size="small"></el-date-picker>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="时间配置：" prop="key2">
          <span>剩余</span>
          <span style="margin-left: 5px">
            <el-select v-model="updateFormModel.key2Val" clearable filterable size="small" style="width: 90px;" placeholder="分钟">
                <el-option v-for="i in 60" :label="`${i}分钟`" :value="i"></el-option>
              </el-select>
          </span>
          <span style="margin-left: 5px">进行提醒，</span>
          <span style="margin-left: 5px">
            <el-select v-model="updateFormModel.key2Val1" clearable filterable size="small" style="width: 70px;" placeholder="时间">
                <el-option v-for="i in 60" :label="i" :value="i"></el-option>
              </el-select>
          </span>
          <span style="margin-left: 5px">
            <el-select v-model="updateFormModel.key2Val2" clearable filterable size="small" style="width: 80px;" placeholder="单位">
                <el-option label="分钟" value="1"></el-option>
                <el-option label="秒钟" value="2"></el-option>
              </el-select>
          </span>
          <span style="margin-left: 5px">开始进入倒计时</span>
        </el-form-item>
        <el-form-item label="涉及系统：" prop="key3">
          <el-checkbox-group v-model="updateFormModel.key3">
            <el-checkbox label="1">质检系统</el-checkbox>
            <el-checkbox label="2">档案系统</el-checkbox>
            <el-checkbox label="3">计量系统</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="systemUpdateCancel">取消</el-button>
        <el-button type="primary" @click="updateFormSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import '@/styles/announcement.scss'
export default {
  data() {
    return {
      //系统索引
      systemClassify: '1-1',
      //系统信息
      isSystemInfoShow: false,
      systemInfoData: {type: '1'},
      systemInfoRules: {
        type: [{ required: true, message: '请选择数据类型', trigger: 'blur' }],
        name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
        groupId: [{ required: true, message: '请选择上级分组', trigger: 'blur' }],
        client: [{ required: true, message: '请选择关联应用', trigger: 'blur' }],
        title: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
      },
      //搜索
      searchForm: {current: 1, size: 20, total: 0},
      //公告列表
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        state: '已取消'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        state: '待发布'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        state: '已发布'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      //待发布
      isReleasedShow: false,
      //普通公告
      isGeneralShow: false,
      generalFormModel: {
        key1Val: null,
        key2Val: null,
        key3: [],
      },
      generalFormRules: {},
      //系统更新
      isSystemUpdateShow: false,
      updateFormModel: {
        key3: [], key4: []
      },
      updateFormRules: {},
    }
  },
  computed: {

  },
  created() {

  },
  methods: {
    //系统分类被选择
    systemClassifySelect(index) {
      this.systemClassify = index
    },
    //新增系统
    addSystemClick() {
      this.systemInfoData = {type: '1'}
      this.isSystemInfoShow = true
    },
    //编辑系统
    editSystemClick(event, index) {
      // 阻止默认右键菜单
      event.preventDefault();
      console.log(index)
      this.systemInfoData = {id:'11', type: '1'}
      this.isSystemInfoShow = true
    },
    //确定新增编辑系统
    async systemFormSubmit() {
      const isForm = await this.getFormValidate('systemInfoRef')
      if (!isForm) return
      console.log(this.systemInfoData)
    },
    //删除系统分类
    systemFormDel() {
      console.log('操作删除')
    },
    //取消新增编辑系统
    systemFormCancel() {
      this.isSystemInfoShow = false
      this.systemInfoData = {}
    },
    handleSizeChange(val) {
      this.searchForm.size = val
    },
    handleCurrentChange(val) {
      this.searchForm.current = val
    },
    //表格多选
    tableSelection(val) {
      console.log(val)
    },
    //表格编辑
    handleEdit(index, row) {
      console.log(index, row);
    },
    //表格删除
    handleDelete(index, row) {
      console.log(index, row);
    },
    //待发布打开
    releasedShow() {
      this.isReleasedShow = true
    },
    //待发布关闭
    releasedCancel() {
      this.isReleasedShow = false
    },
    //打开普通公告
    generalShow() {
      this.isGeneralShow = true
    },
    generalFormSubmit() {
      this.generalCancel()
    },
    //普通公告关闭
    generalCancel() {
      this.isGeneralShow = false
    },
    //系统更新公告关闭
    systemUpdateShow() {
      this.isSystemUpdateShow = true
    },
    //系统更新公告提交
    updateFormSubmit() {
      this.systemUpdateCancel()
    },
    //系统更新公告关闭
    systemUpdateCancel() {
      this.isSystemUpdateShow = false
    },
    //验证表单
    async getFormValidate(ref) {
      return new Promise(resolve => {
        if (!ref) {
          resolve(false)
          return
        }
        this.$refs[ref].validate((valid) => {
          resolve(!!valid)
        });
      })
    }
  },
}
</script>

<style lang="scss">

</style>