web-achieve/src/views/adminCenter/adminScore/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top">
          <template>
            <el-button type="primary" size="mini" @click="back">返回</el-button>
            <el-button type="primary" size="mini" @click="add">添加专家</el-button>
            <!-- <el-button type="success" size="mini" @click="previewBtn">预览PDF</el-button> -->
          </template>
        </el-col>
        <el-col :span="24" class="down">
          <data-table
            :fields="fields"
            :opera="opera"
            :data="list"
            :usePage="false"
            @query="search"
            @view="toView"
            @delete="toDelete"
            :useSum="true"
            :sumcol="['verify.score']"
            sumres="avg"
          ></data-table>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="专家信息管理" width="40%" :visible.sync="dialog" @close="handleClose" :destroy-on-close="true">
      <data-form :data="form" :fields="formfields" :rules="rules" @save="toSave">
        <template #options="{item}">
          <template v-if="item.model === 'expert_id'">
            <el-option v-for="(i, index) in expertList" :key="`expert${index}`" :label="i.expert_name" :value="i._id"></el-option>
          </template>
        </template>
      </data-form>
    </el-dialog>
    <el-dialog title="评分详情" width="40%" :visible.sync="scoreDialog" @close="handleClose" :destroy-on-close="true">
      <scoreInfo :form="info"></scoreInfo>
    </el-dialog>
  </div>
</template>

<script>
const _ = require('lodash');
import scoreInfo from './parts/scoreInfo.vue';
import dataTable from '@common/src/components/frame/filter-page-table.vue';
import dataForm from '@common/src/components/frame/form.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: achieveExpert } = createNamespacedHelpers('achieveExpert');
const { mapActions: achieveApplyExpert } = createNamespacedHelpers('achieveApplyExpert');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'detail',
  props: {},
  components: {
    dataTable,
    dataForm,
    scoreInfo,
  },
  data: function() {
    return {
      // 工作类型:1=>评分;2=>会审
      type: '1',
      opera: [
        // {
        //   label: '编辑',
        //   method: 'edit',
        //   display: i => !_.isObject(i.verify),
        // },
        {
          label: '删除',
          method: 'delete',
          display: i => !_.isObject(i.verify),
        },
        {
          label: '评分详情',
          method: 'view',
          display: i => _.isObject(i.verify),
        },
      ],
      fields: [
        { label: '专家姓名', prop: 'expert_id.expert_name', showTip: true },
        { label: '联系电话', prop: 'expert_id.phone', showTip: true },
        { label: '评分', prop: 'verify.score', showTip: true },
        { label: '状态', prop: 'verify', format: i => (_.isObject(i) ? '已评分' : '未评分') },
      ],
      list: [],
      total: 0,
      // 创建专家账号
      dialog: false,
      form: {},
      rules: {},
      formfields: [{ label: '专家', model: 'expert_id', type: 'select', options: { multiple: true } }],
      // 评分详情
      scoreDialog: false,
      info: {},
      expertList: [],
    };
  },
  async created() {
    await this.search();
    this.toGetExpert();
  },
  methods: {
    ...achieveApplyExpert(['query', 'create', 'update', 'delete']),
    ...achieveExpert({ getExpert: 'query' }),
    // 查询列表
    async search({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.query({ ...info, apply_id: this.id, expert: true, type: this.type });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    // 专家评分查看
    toView({ data }) {
      const { expert_id, verify } = data;
      const d = { name: expert_id.expert_name, phone: expert_id.phone, score: verify.score, content: verify.content };
      this.$set(this, `info`, d);
      this.scoreDialog = true;
    },
    // 添加专家
    add() {
      this.dialog = true;
    },
    // 提交
    async toSave({ data }) {
      const duplicate = _.cloneDeep(data);
      duplicate.apply_id = this.id;
      duplicate.type = this.type;
      let method = _.get(duplicate, '_id') ? 'update' : 'create';
      let res = await this[method](duplicate);
      if (this.$checkRes(res, '专家保存成功', res.errmsg || '专家保存失败')) {
        this.handleClose();
        this.search();
      }
    },
    // 修改
    // toEdit({ data }) {
    //   this.$set(this, 'form', _.cloneDeep(data));
    //   this.dialog = true;
    // },
    // 删除
    async toDelete({ data }) {
      const res = await this.delete(data._id);
      if (this.$checkRes(res, '删除成功', res.errmsg || '删除失败')) {
        this.search();
      }
    },
    // 取消
    handleClose() {
      this.dialog = false;
      this.form = {};
    },
    // 返回列表
    back() {
      this.$router.push({ path: '/adminScore' });
    },
    // 获取专家列表
    async toGetExpert() {
      const res = await this.getExpert({ status: '0' });
      if (this.$checkRes(res)) this.$set(this, 'expertList', res.data);
    },
    // 预览专家
    previewBtn() {
      // this.$router.push({ path: '/adminScore/preview', query: { id: this.id, type: '1' } });
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  .top {
    margin: 0 0 10px 0;
    text-align: right;
  }
}
</style>