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"
        :pageSize="this.$store.state.tablePageSize"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit('', 'add')"
            v-if="$hasPermission('main:version:save')"
          >
            新建
          </el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            v-if="$hasPermission('main:version:delete')"
            @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 && $hasPermission('main:version:update')"
            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 && $hasPermission('main:version:delete')"
            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
          },
          {
            prop: 'bigVersion',
            label: '规则示例',
            showOverflowTooltip: true,
            align: 'center',
            formatter: (_row, _column, cellValue) => {
              return (
                _row.symbol + _row.bigVersion + _row.mark + _row.smallVersion
              );
            },
            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) {
        console.log('row', 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>