share-fun-web/src/views/baseManagement/updateList/index.vue

<template>
  <div class="">
    <toolbar @on-filter="filterData" @on-reset="filterData" />

    <div class="m-10 bg-w p-20 br-10">
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
        >新增</el-button
      >
      <base-table
        :columns="columns"
        :items="items"
        :pagination="pagination"
        :page-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import toolbar from './toolbar';
import mxFilterList from '@/mixins/filterList';
import { getPage, changeShowItem, forceUpgradeItem } from '@/api/app';

export default {
  name: 'UpdateList',

  components: { toolbar },

  mixins: [
    mxFilterList({
      fetchList: getPage // 在下方data再声明一个 fetchList: iGetList 同等效果
    })
  ],

  data() {
    return {
      columns: [
        {
          key: 'productName',
          name: '版本名',
          minWidth: this.$col.m
        },
        {
          key: 'versionNumber',
          name: '版本号',
          minWidth: this.$col.b
        },
        {
          key: 'platform',
          name: '客户端',
          width: this.$col.m
        },
        {
          key: 'downloadUrl',
          name: '下载地址',
          minWidth: this.$col.m
        },
        {
          key: 'upgradeDesc',
          name: '升级描述',
          minWidth: this.$col.b
        },
        {
          key: 'isForceUpgrade',
          name: '强制更新',
          width: this.$col.b,
          type: 'switch',
          switchName: ['开启', '关闭'],
          api: async row => {
            const { success } = await forceUpgradeItem(row);
            if (success) {
              this.$success('修改成功！');
            }
            this.$g_emit('update_app_reload');
          }
        },
        {
          key: 'isShow',
          name: '状态',
          width: this.$col.b,
          type: 'switch',
          switchName: ['运行', '停止'],
          api: async row => {
            const { success } = await changeShowItem(row);
            if (success) {
              this.$success('修改成功！');
            }
            this.$g_emit('update_app_reload');
          }
        }
        // {
        //   key: 'action',
        //   name: '操作',
        //   width: '120',
        //   render: (h, { row }) => {
        //     const action = [];
        //     action.push(
        //       h(
        //         'el-button',
        //         {
        //           props: {
        //             type: 'text'
        //           },
        //           on: {
        //             click: () =>
        //               this.$TrendItemModal({
        //                 id: row.id,
        //                 info: {
        //                   name: row.name,
        //                   sort: row.sort,
        //                   isShow: row.isShow
        //                 }
        //               })
        //           }
        //         },
        //         '编辑'
        //       )
        //     );
        //     action.push(
        //       h(
        //         'BaseBtn',
        //         {
        //           props: {
        //             popip: true,
        //             txt: '删除',
        //             type: 'text'
        //           },
        //           class: 'ml-10',
        //           on: {
        //             ok: () => this.handleDelItem(row)
        //           }
        //         },
        //         '删除'
        //       )
        //     );

        //     return h('div', action);
        //   }
        // }
      ]
    };
  },

  created() {
    this.$g_on('update_app_reload', this.reload);
  },

  beforeDestroy() {
    this.$g_off('update_app_reload', this.reload);
  },

  methods: {
    handleAdd() {
      this.$updateAppItemModal();
    },
    async handleDelItem(item) {
      const { success, msg } = await delItem({
        id: item.id
      });
      if (success) {
        this.$success('删除成功！');
        this.$g_emit('trend_reload');
      }
    }
  }
};
</script>

<style type="scss" scoped></style>