kd-aiot-frontend/src/views/checklistManagement/templatelist.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <seek-page :seekList="seekList" @search="search"></seek-page>
      <ele-pro-table
        ref="table"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :cache-key="cacheKeyUrl"
        autoAmendPage
        :pageSize="20"
        :height="tableHeight"
        @fullscreen-change="fullscreenChange"
      >
        <template v-slot:toolbar>
          <el-button type="primary" size="mini" @click="openAddDialog('add')"
            >新建</el-button
          >
          <!-- <el-button type="primary" size="mini">导入</el-button>
          <el-button size="mini">导出</el-button> -->
        </template>
        <template v-slot:action="{ row }">
          <el-link type="text" @click="openAddDialog('clone', row)"
            >克隆</el-link
          >
          <el-link
            type="text"
            @click="openAddDialog('edit', row)"
            style="margin-right: 10px"
            >修改</el-link
          >
          <el-popconfirm
            v-if="row.enable == 0"
            title="您确定要删除这条数据吗？"
            @confirm="deleteRow(row)"
          >
            <el-link slot="reference" type="danger">删除</el-link>
          </el-popconfirm>
        </template>

        <template v-slot:templateCode="{ row }">
          <el-link type="text" @click="openAddDialog('detail', row)">{{
            row.templateCode
          }}</el-link>
        </template>
      </ele-pro-table>
    </el-card>

    <templateAdd ref="templateAddRef" @reload="reload"></templateAdd>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import {
    checklisttemplatePage,
    checklisttemplateLogicDeleteByIds
  } from '@/api/checklisttemplate/index';
  import templateAdd from './components/templateAdd.vue';

  export default {
    mixins: [dictMixins, tableColumnsMixin],
    components: { templateAdd },
    data() {
      return {
        columns: [
          {
            width: 50,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            label: '序号'
          },
          {
            prop: 'checklistType',
            label: '放行类型',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            formatter: (row) => {
              return this.getDictValue('放行类型', row.checklistType);
            }
          },
          {
            prop: 'templateCode',
            label: '放行单模板编码',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            slot: 'templateCode'
          },
          {
            prop: 'autoProduct',
            label: '是否自动成品放行指定模板',
            align: 'center',
            minWidth: 130,
            showOverflowTooltip: true,
            formatter: (row) => {
              if (row.checklistType == '1') {
                return row.autoProduct == 1 ? '是' : '否';
              }

              return '';
            }
          },
          {
            prop: 'templateName',
            label: '放行单名称',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'remark',
            label: '备注',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'enable',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            formatter: (row) => {
              return row.enable ? '启用' : '停用';
            }
          },
          {
            prop: 'createUserName',
            label: '创建人',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'updateTime',
            label: '修改时间',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 220,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        cacheKeyUrl: 'mes-259251647-template-list-table',
        tableHeight: 'calc(100vh - 320px)'
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '编码：',
            value: 'templateCode',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '名称：',
            value: 'templateName',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '放行类型：',
            value: 'checklistType',
            type: 'select',
            placeholder: '请输入',
            planList: this.getDictListByName('放行类型')
          }
        ];
      }
    },
    created() {
      this.requestDict('放行类型');
    },
    methods: {
      // 刷新表格
      reload(where = {}) {
        this.$refs.table.reload({
          where
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        // 参数
        const body = {
          ...where,
          ...order,
          pageNum: page,
          size: limit
        };
        return checklisttemplatePage(body);
      },
      search(where) {
        this.reload(where);
      },
      openAddDialog(type, row) {
        this.$refs.templateAddRef?.open(type, row);
      },
      // 删除
      async deleteRow(row) {
        await checklisttemplateLogicDeleteByIds([row.id]);
        this.$message.success('删除成功');
        this.reload();
      },
      fullscreenChange(fullscreen) {
        if (fullscreen) {
          this.tableHeight = 'calc(100vh - 120px)';
        } else {
          this.tableHeight = 'calc(100vh - 320px)';
        }
      }
    }
  };
</script>

<style></style>