kd-aiot-frontend/src/views/appUpdate/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')"
          >
            新建
          </el-button>
        </template>
        <template v-slot:fileUrl="{ row }">
          <el-link
            size="mini"
            type="text"
            @click="downloadFile(row)"
            v-if="row.fileUrl"
          >
            下载
          </el-link>
        </template>
        <template v-slot:action="{ row }">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此版本吗？"
            @confirm="deleteList(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 新增/编辑/详情弹窗 -->
    <add-or-edit-dialog
      :addOrEditDialogFlag.sync="addOrEditDialogFlag"
      v-if="addOrEditDialogFlag"
      ref="addOrEditDialogRef"
      @reload="reload"
    />
  </div>
</template>

<script>
  import addOrEditDialog from './components/addOrEditDialog.vue';
  import { getFile } from '@/api/system/file';
  import { getTableList, deleteList } from '@/api/appUpdate';

  export default {
    name: 'technologyProduction',
    components: {
      addOrEditDialog
    },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            prop: 'versionCode',
            label: '版本号',
            showOverflowTooltip: true,
            align: 'center'
          },

          {
            prop: 'releaseNotes',
            label: '发布说明',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            slot: 'fileUrl',
            prop: 'fileUrl',
            label: '下载安装包',
            showOverflowTooltip: true,
            align: 'center'
          },
          {
            prop: 'createTime',
            label: '发布时间',
            showOverflowTooltip: true,
            align: 'center'
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],

        // 是否显示编辑弹窗
        addOrEditDialogFlag: false,
        selection: []
      };
    },

    computed: {},
    methods: {
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        return await getTableList({
          ...where,
          ...order,
          pageNum: page,
          size: limit
        });
      },

      downloadFile(file) {
        getFile({ objectName: file.fileStorePath }, '智慧工厂');
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      async deleteList({ id }) {
        await deleteList([id]);
        this.$refs.table.reload();
      },
      /* 打开编辑弹窗 */
      openEdit(row = {}, type) {
        this.addOrEditDialogFlag = true;
        this.$nextTick(() => {
          this.$refs.addOrEditDialogRef.init(type, { ...row });
        });
      }
    }
  };
</script>