Manager.vue

<template>
  <a-page-header-wrapper title="查询表格">
    <a-card :bordered="false">
      <div class="tableList">
        <div class="tableListForm">
          <a-form layout="inline">
            <a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
              <a-col :md="8" :sm="24">
                <a-form-item label="版本号" v-decorator="['app_version']">
                  <a-input v-model="query.app_version" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="应用名称" v-decorator="['app_name']">
                  <a-select
                    v-model="query.app"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <a-option
                      v-for="item in appList"
                      :key="item.uuid"
                      :value="item.uuid"
                      >{{ item.app_name }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <span class="submitButtons">
                  <a-button
                    type="primary"
                    htmlType="submit"
                    @click="getPackageList"
                  >
                    查询
                  </a-button>
                  <a-button :style="{ marginLeft: '8px' }" @click="resetForm">
                    重置
                  </a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="tableListOperator">
          <span v-show="selectedRowKeys.length > 0">
            <a-button>批量操作</a-button>
            <a-dropdown overlay="{menu}">
              <a-button> 更多操作 <icon type="down" /> </a-button>
            </a-dropdown>
          </span>
        </div>
        <a-table
          :columns="columns"
          :rowKey="(record) => record.uuid"
          :dataSource="tableData.list"
          :pagination="tableData.pagination"
          :loading="loading"
          @change="handleTableChange"
        >
          <template slot="record" slot-scope="record">
            {{ record.create_at }}
          </template>
          <template
            slot="expandedRowRender"
            slot-scope="record"
            style="margin: 0"
          >
            <p :style="[sya, syb]">
              <a-avatar
                :src="record.application.app_icon"
                shape="square"
                :size="128"
              />
            </p>
            <p :style="[sya]">EPK File Info</p>
            <a-row>
              <a-col :span="6">
                <a-description-item
                  title="Buffer Length"
                  :content="record.package_info.buff_length"
                />
              </a-col>
              <a-col :span="6">
                <a-description-item
                  title="Compress Level"
                  :content="record.package_info.compress_level"
                />
              </a-col>
              <a-col :span="6">
                <a-description-item
                  title="EPK Size"
                  :content="record.package_info.epk_filecontent_size"
                />
              </a-col>
              <a-col :span="6">
                <a-description-item
                  title="File Count"
                  :content="record.package_info.file_count"
                />
              </a-col>
            </a-row>
          </template>
          <template slot="action" slot-scope="text, record">
            <a href="javascript:;" @click="hadnleEdit(record)">编辑源文件</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="handleDownload(record)">下载EPK</a>
          </template>
        </a-table>
      </div>
    </a-card>
  </a-page-header-wrapper>
</template>

<script>
import {
  Avatar,
  Row,
  Col,
  Card,
  List,
  Button,
  Form,
  Icon,
  Table,
  Divider,
  Dropdown,
  Input,
  Select,
  DatePicker,
  message,
} from "ant-design-vue";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import DescriptionItem from "@/components/DescriptionItem";
const columns = [
  {
    title: "应用名称",
    dataIndex: "app_name",
    width: "15%",
    scopedSlots: { customRender: "pack" },
  },
  {
    title: "版本号",
    dataIndex: "app_version",
    sorter: true,
    scopedSlots: { customRender: "name" },
  },
  {
    title: "打包算法",
    dataIndex: "algorithm",
    filters: [
      { text: "zlib", value: "zlib" },
      { text: "heatshrink", value: "heatshrink" },
    ],
  },
  {
    title: "打包来源",
    dataIndex: "source_text",
    filters: [
      { text: "API", value: "API" },
      { text: "Frontend", value: "Frontend" },
      { text: "API", value: "API" },
    ],
  },
  {
    title: "Action",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];
// import { mapGetters } from "vuex";
import { mapTrim, download } from "@/utils/index";
import { getPackageList, getApplicationList } from "@/api/openapi";

export default {
  name: "ApplicationManager",
  data: () => ({
    selectedRowKeys: [],
    columns,
    sya: {
      fontSize: "16px",
      color: "rgba(0,0,0,0.85)",
      lineHeight: "24px",
      display: "block",
      marginBottom: "16px",
    },
    syb: {
      marginBottom: "24px",
    },
    loading: false,
    query: {
      app: null,
      app_name: null,
      app_version: null,
    },
    appList: [],
    post: {
      page: 1,
      pageSize: 15,
    },
    tableData: {
      list: [],
      pagination: {
        pageSize: 15,
        total: 200,
      },
    },
  }),
  components: {
    Icon,
    APageHeaderWrapper: PageHeaderWrapper,
    AAvatar: Avatar,
    ARow: Row,
    ACol: Col,
    ACard: Card,
    ACardGrid: Card.Grid,
    ACardMeta: Card.Meta,
    AList: List,
    AButton: Button,
    AForm: Form,
    AFormItem: Form.Item,
    AIcon: Icon,
    ATable: Table,
    ADescriptionItem: DescriptionItem,
    ADivider: Divider,
    ADropdown: Dropdown,
    AInput: Input,
    ASelect: Select,
    AOption: Select.Option,
    ARangePicker: DatePicker.RangePicker,
  },
  methods: {
    handleDownload(record) {
      download(`${record.app_name}_${record.app_version}.epk`, record.file_path)
        .then(() => {
          message.success("下载成功")
        })
        .catch(() => {
          message.error("下载失败")
        });
    },
    hadnleEdit(record) {
      this.$router.push({ name: "FileManager", params: { directory: record.file_dir, disk: "epks" } })
    },
    resetForm() {
      this.query = {
        app: null,
        app_name: null,
        app_version: null,
      };
      this.getPackageList()
    },
    getPackageList() {
      this.loading = true;
      let opts = mapTrim(this.query);
      opts = Object.assign(opts, this.post);

      getPackageList(opts)
        .then((res) => {
          message.success(res.msg);
          if (res.code == 200) {
            this.tableData.list = res.data.map(item => {
              if (item.source == 0) item.source_text = "Frontend"
              else item.source_text = "API"
              return item;
            });
            this.tableData.pagination.pageSize = res.pageSize;
            this.tableData.pagination.total = res.total;
          }
        })
        .catch((err) => {
          message.error(err.msg);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getApplicationList() {
      getApplicationList({ scope: "list" })
        .then((res) => {
          message.success(res.msg);
          this.appList = res.data;
        })
        .catch((err) => {
          message.error(err.msg);
        });
    },
    onSelectChange(selectedRowKeys) {
      window.console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination, filters, sorter);
      this.post.page = pagination.current;
      this.post.pageSize = pagination.pageSize;
      this.getPackageList();
    },
  },
  created() {
    this.getApplicationList();
    this.getPackageList();
  },
};
</script>
<style lang="less">
@import url("styles/tableList.less");
</style>