kd-aiot-frontend/src/views/versionManage/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <index-search :typeList="typeList" @search="reload"/>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        height="calc(100vh - 325px)"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        row-key="id"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit('','add')"
          >
            新建
          </el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            @click="removeBatch"
            plain
          >
            删除
          </el-button>
          <!--          <el-button-->
          <!--            size="small"-->
          <!--            type="primary"-->
          <!--            icon="el-icon-upload2"-->
          <!--            class="ele-btn-icon"-->
          <!--            plain-->
          <!--          >-->
          <!--            导出-->
          <!--          </el-button>-->
          <!--          <el-button-->
          <!--            size="small"-->
          <!--            type="primary"-->
          <!--            icon="el-icon-download"-->
          <!--            class="ele-btn-icon"-->
          <!--            plain-->
          <!--          >-->
          <!--            导入-->
          <!--          </el-button>-->
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link
            v-if="row.status!=1"
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="openEdit(row,'edit')"
          >
            修改
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-setting"
            @click="openEdit(row, 'view')"
          >
            详情
          </el-link>
          <el-popconfirm
            v-if="row.status!=1"
            class="ele-action"
            title="确定要删除当前资质吗？"
            @confirm="remove(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
        <template v-slot:status="scope">
          <el-switch
            @change="(val)=>handleStatus(scope,val)"
            :active-value="1"
            :inactive-value="0"
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 新增/编辑/详情弹窗 -->
    <add-or-edit-dialog
      :addOrEditDialogFlag.sync="addOrEditDialogFlag"
      v-if="addOrEditDialogFlag"
      ref="addOrEditDialogRef"
      :data="current"
      :typeList="typeList"
      @reload="reload"
    />
  </div>
</template>

<script>
import addOrEditDialog from './components/addOrEditDialog.vue';
import dictMixins from '@/mixins/dictMixins';
import FileUpload from "@/components/upload/fileUpload.vue";
import {getFile} from "@/api/system/file";
import {reviewStatus} from "@/enum/dict";
import {getSubTwoLevelAPI, getVersionManagePageAPI, updateStatus, versionManageDeleteAPI} from "@/api/versionManage";
import indexSearch from "@/views/versionManage/components/index-search.vue";
import {getSubPage} from "@/api/classifyManage";
import {getByCode} from "@/api/system/dictionary-data";

export default {
  name: 'technologyProduction',
  components: {
    FileUpload,
    indexSearch,
    addOrEditDialog
  },
  mixins: [dictMixins],
  data() {
    return {
      levelOptions: [
        {
          label: '初级',
          value: '1'
        },
        {
          label: '中级',
          value: '2'
        },
        {
          label: '高级',
          value: '3'
        }
      ],
      isView: false,
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: 'left'
        },
        {
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center'
        },
        {
          slot: 'name',
          prop: 'name',
          label: '名称',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 110
        },
        {
          slot: 'type',
          prop: 'type',
          label: '分类',
          showOverflowTooltip: true,
          align: 'center',
          formatter: (row, column) => {
            return this.getDictV('version_rule_type',row.type) ;
          },
          minWidth: 110
        },
        {
          slot: 'getExample',
          prop: 'getExample',
          label: '规则示例',
          showOverflowTooltip: true,
          align: 'center',
          formatter: (_row, _column, cellValue) => {
            let value = _row.note || (_row.noteType == 1 ? 'A' : '1')
            return value + _row.mark + _row.versionNumber
          },
          minWidth: 120
        },
        {
          label: '是否启用',
          prop: 'status',
          slot: 'status',
          align: "center",
          width: 120,
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 260,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }
      ],
      // 表格选中数据
      selection: [],
      dictList: {},
      // 当前编辑数据
      current: null,
      typeList: [],
      // 是否显示编辑弹窗
      addOrEditDialogFlag: false,
    };
  },
  created() {
    this.getTypeList()
  },
  computed: {},
  methods: {
    // getTypeName(list, val, callBack) {
    //   let find = list.find(item => callBack(item, val)) || {}
    //   if (find.name) {
    //     return find.name
    //   } else {
    //     for (let i = 0; i < list.length; i++) {
    //       let find = list[i].subList.find(item => callBack(item, val)) || {}
    //       if (find.name) {
    //         return find.name
    //       }
    //     }
    //   }
    // },
    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]]
        }
      })
    },
    /* 表格数据源 */
    async datasource({page, limit, where, order}) {
      await this.getDictList('version_rule_type')
      return await getVersionManagePageAPI({
        ...where,
        ...order,
        pageNum: page,
        size: limit
      });
    },
    handleStatus(scope, val) {
      let msg = val == 1 ? '是否启用该规则' : '是否关闭该规则'
      this.$confirm(msg, '提示', {
        type: 'warning'
      }).then(async () => {
        await updateStatus(
          {
            id: scope.row.id,
            status: val
          }
        )
        this.$message.success('操作成功')
      }).catch(() => {
        scope.row.status = val == 1 ? 0 : 1
      })

    },
    async getTypeList() {
      this.typeList = await getSubTwoLevelAPI({
        parentId: 0,
        pageNum: 1,
        size: 9999
      })

      console.log(this.typeList);
    },
    downloadFile(file) {
      getFile({objectName: file.storePath}, file.name);
    },
    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({page: 1, where: where});
    },
    /* 打开编辑弹窗 */
    openEdit(row = {}, type) {
      this.addOrEditDialogFlag = true
      this.$nextTick(() => {
        this.$refs.addOrEditDialogRef.init(type, {...row})
      })
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({lock: true});
      versionManageDeleteAPI([row.id])
        .then((msg) => {
          loading.close();
          this.$message.success('删除成功');
          this.reload();
        })
        .catch((e) => {
          loading.close();
          // this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) return this.$message.error('请至少选择一条数据');
      if (this.selection.some(item => item.status == 1)) return this.$message.error('启用状态的规则不允许删除！请检查');
      this.$confirm('确定要删除选中的规则吗?', '提示', {
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({lock: true});
        versionManageDeleteAPI(this.selection.map((d) => d.id))
          .then((msg) => {
            loading.close();
            this.$message.success('删除成功');
            this.reload();
          })
          .catch((e) => {
            loading.close();
            // this.$message.error(e.message);
          });
      })
        .catch(() => {
        });
    }
  }
};
</script>