kd-aiot-frontend-wt/src/views/bpm/formConfig/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <el-button icon="el-icon-plus" plain @click="handleAddOrEdit('','add')">添加模板</el-button>
      <div class="content-box">
        <el-empty style="width: 100%;" :image-size="200" v-if="!Object.keys(templateList).length"
                  description="暂无模板，快去新建吧"></el-empty>
        <div v-for="category in Object.keys(templateList)" :key="category" class="category_box">
          <div class="category_box_title">{{ getDictV('collaborative_type', category) }}</div>
          <div v-for="v in templateList[category]" :key="v.id" class="category_content"
               @mouseenter.self="()=>showEdit=v.id" @mouseleave.s.self="()=>showEdit=''">
            <div style="display: flex;align-items: center">

               <svg-icon
                 style="margin-right: 5px"
                 :icon-class="v.icon"
                 className="svg-icon-set"
               ></svg-icon>
              <span>
                {{ v.name }}
              </span>
            </div>
            <span>
             <span v-if="v?.dataScope?.length" style="max-width: 200px;display: inline-block">
                {{ getDataScopeName(v.dataScope) }}
             </span>
              <span v-else style="max-width: 200px;display: inline-block">
                {{ '全公司可见' }}
              </span>
              <span v-if="showEdit==v.id">
                <el-button size="mini" type="text" @click="handleEditDataScope(v)">修改</el-button>

              </span>
            </span>
            <span>
              <el-button size="mini" style="color: #0C4C7F" v-if="!v.status" type="text" @click="handleAddOrEdit(v,'edit')">编辑</el-button>
               <el-button size="mini" type="text" @click="handleAddOrEdit(v,'copy')">复制</el-button>
                <el-button size="mini" type="text" v-if="!v.status" style="color: red"  @click="handleDel(v)">删除</el-button>
                <el-button size="mini" type="text" v-if="v.status" style="color: red"  @click="handleStatus(v,0)">停用</el-button>
                <el-button size="mini" type="text" v-if="!v.status" style="color: #58e805"  @click="handleStatus(v,1)">启用</el-button>

            </span>
          </div>
        </div>
      </div>
      <addOrEditDialog :addOrEditDialogFlag.sync="addOrEditDialogFlag" ref="dialogRef" v-if="addOrEditDialogFlag"
                       @reload="getTemplateList"></addOrEditDialog>
      <visibility-range-dialog :visibilityRangeDialogFlag.sync="visibilityRangeDialogFlag"
                               v-if="visibilityRangeDialogFlag"
                               @reload="getTemplateList"
                               ref="visibilityRangeDialogRef"></visibility-range-dialog>
    </el-card>
  </div>


</template>
<script>
import addOrEditDialog from "./addOrEditDialog.vue";
import {bpmCustomFormDelete, bpmCustomFormUpdate, getBpmCustomFormPage} from "@/api/bpm/task";
import formGenerator from "@/components/FormGenerator/index.vue";
import visibilityRangeDialog from "@/views/bpm/formConfig/visibilityRangeDialog.vue";
import {getByCode} from "@/api/system/dictionary-data";

export default {
  components: {
    formGenerator,
    addOrEditDialog,
    visibilityRangeDialog
  },
  name: "index",
  data() {
    return {
      addOrEditDialogFlag: false,
      visibilityRangeDialogFlag: false,
      showEdit: false,
      templateList: {},
      list: {},
      dictList: {}
    }
  },
  created() {
    this.getDictList('collaborative_type')
    this.getTemplateList()

  },
  computed: {
    getDataScopeName() {
      return (dataScope) => {
        return dataScope.map(item => item.name).join(',')
      }
    }
  },
  methods: {
    getDictV(code, val) {
      if (!this.dictList[code]) return '';
      return this.dictList[code].find(item => item.value == val)?.label
    },
    async getDictList(code) {
      let {data: res} = await getByCode(code)
      this.dictList[code] = res.map(item => {
        let values = Object.keys(item)
        return {
          value: values[0],
          label: item[values[0]]
        }
      })
    },
    handleAddOrEdit(row = {}, type) {
      this.addOrEditDialogFlag = true
      this.$nextTick(() => {
        this.$refs.dialogRef.init(row, type)
      })
    },
    async getTemplateList() {
      let params = {
        pageNum: 1,
        size: 9999,
      }
      const {list} = await getBpmCustomFormPage(params)
      this.list = list
      this.templateList = _.groupBy(list, 'dictType');
    },
    handleCommand(command, v) {
      switch (command) {
        case 'start':
          this.handleStart(v, 1);
          break
        case 'stop':
          this.handleStatus(v, 0)
          break
        case 'del':
          this.handleDel(v);
          break
        case 'copy':
          this.handleAddOrEdit(v, command);
          break
      }
    },
    async handleDel(v) {
      this.$confirm('确定删除该模板?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await bpmCustomFormDelete([v.id])
          let findIndex = this.templateList[v.dictType].findIndex(i => i.id == v.id)
          this.templateList[v.dictType].splice(findIndex, 1)
          this.$message.success('操作成功')
        }).catch(()=>{
      })


    },
    handleEditDataScope(v) {
      this.visibilityRangeDialogFlag = true
      this.$nextTick(() => {
        this.$refs.visibilityRangeDialogRef.init(v)
      })
    },
    handleStatus(v,status) {
      let msg = status?'启用':'停用'
     this.$confirm(`是否${msg}此模板？`, '提示', {
       type: 'warning'
     }).then(async ()=>{
       v.status = status
       await bpmCustomFormUpdate(v)
       this.$message(`${msg}成功`)
     }).catch(e=>{
       console.log(e);
     })

    }
  }
}
</script>
<style scoped lang="scss">
.ele-body {
  padding: 15px 20% !important;
}

.content-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

  .category_box {
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    width: 100%;
    margin-top: 15px;

    .category_box_title {
      font-size: 14px;
      font-weight: bold;
      color: #616161;
      height: 40px;
      display: flex;
      padding: 5px 20px;
      align-items: center;
      background: rgb(247, 247, 248);
    }

    .category_content {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 5px 20px;
      justify-content: space-between;
    }


    .category_content:hover {
      background-color: rgba(135, 181, 243, 0.29);

    }
  }
}

::v-deep .el-card__body {
  padding: 10px 5%;
  // height: 85vh;
}
</style>