web-achieve/src/views/adminCenter/adminCertFile/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-button type="primary" size="mini" @click="toAdd()">添加</el-button>
        </el-col>
        <el-col :span="24">
          <data-table @query="search" :fields="fields" :opera="opera" :data="list" :total="total" @download="toDownload" @edit="toEdit" @del="toDel">
          </data-table>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="证书资料" center width="30%" :close-on-click-modal="false" :visible.sync="certShow" destroy-on-close @closed="certClose">
      <form-1 :form="form" @onSubmit="onSubmit" :userList="userList" :applyList="applyList"></form-1>
    </el-dialog>
  </div>
</template>

<script>
import form1 from './parts/form-1.vue';
import dataTable from '@common/src/components/frame/filter-page-table.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('achieve_cert');
const { mapActions: achieveApply } = createNamespacedHelpers('achieveApply');
const { mapActions: personal } = createNamespacedHelpers('personal');
export default {
  name: 'index',
  props: {},
  components: { dataTable, form1 },
  data: function() {
    return {
      list: [],
      total: 0,
      opera: [
        { label: '证书下载', method: 'download' },
        { label: '修改', method: 'edit' },
        { label: '删除', method: 'del', confirm: true, type: 'danger' },
      ],
      fields: [
        { label: '成果名称', prop: 'apply_name', filter: true },
        { label: '申请人', prop: 'user_name', filter: true },
        { label: '证书资料', prop: 'file.name' },
        { label: '创建时间', prop: 'create_time' },
      ],
      // 成果
      applyList: [],
      // 用戶
      userList: [],
      // 证书资料
      certShow: false,
      form: {},
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
    ...personal({ personalQuery: 'query' }),
    ...achieveApply({ applyQuery: 'query' }),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    // 下载资料
    toDownload({ data }) {
      window.open(data.file.url);
    },
    // 添加
    toAdd() {
      this.certShow = true;
    },
    // 修改
    async toEdit({ data }) {
      let res = await this.fetch(data.id);
      if (this.$checkRes(res)) {
        this.$set(this, `form`, res.data);
        this.certShow = true;
      }
    },
    // 删除
    async toDel({ data }) {
      let res = await this.delete(data.id);
      if (this.$checkRes(res)) if (this.$checkRes(res, '保存成功', '保存失败')) this.search();
    },
    // 提交
    async onSubmit({ data }) {
      let res;
      if (data.id) await this.update(data);
      else await this.create(data);
      if (this.$checkRes(res, '保存成功', '保存失败')) this.certClose();
    },
    // 关闭
    certClose() {
      this.form = {};
      this.certShow = false;
      this.search();
    },
    // 查询其他信息
    async searchOther() {
      let res = await this.applyQuery();
      if (this.$checkRes(res)) {
        this.$set(this, `applyList`, res.data);
      }
      // 用户
      res = await this.personalQuery({ code: this.user.code });
      if (this.$checkRes(res)) {
        this.$set(this, `userList`, res.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    text-align: right;
  }
}
</style>