web-test/src/views/userCenter/projectInfo/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="leftTop"> <span>|</span> <span>调研调查</span> </el-col>
        <el-col :span="24" class="info">
          <span v-if="display == 'list'">
            <el-col :span="24" class="list">
              <el-tabs v-model="active" type="card">
                <el-tab-pane label="已参加" name="first">
                  <data-table
                    v-if="tabs === 'first'"
                    :fields="fields"
                    :opera="opera"
                    :data="twoList"
                    :total="twoTotal"
                    @query="data => search(data, true)"
                    @edit="toGetList"
                  ></data-table>
                  <el-row v-else>
                    <el-col :span="24" style="text-align:right; padding:15px">
                      <el-button type="primary" size="mini" @click="toAdd" style="margin-right:20px">再次填报</el-button>
                      <el-button type="primary" size="mini" @click="tabs = 'first'">返回列表</el-button>
                    </el-col>
                    <el-col :span="24">
                      <data-table
                        :fields="solicFields"
                        :opera="solicOpera"
                        :data="solicList"
                        :total="solicTotal"
                        @query="getSolicList"
                        @edit="toSolicEdit"
                        @view="toSolicView"
                      ></data-table>
                    </el-col>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="未参加" name="second">
                  <data-table :fields="fields" :opera="opera" :data="oneList" :total="oneTotal" @query="data => search(data, false)" @add="toAdd"></data-table>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </span>
          <span v-else-if="display == 'update'">
            <el-col :span="24" class="update">
              <el-col :span="24" class="btn">
                <el-button type="primary" size="mini" @click="back">返回列表</el-button>
              </el-col>
              <el-col :span="24" class="updateForm">
                <el-tabs v-model="updateActive" type="card">
                  <el-tab-pane label="信息填报" name="first">
                    <projectForm :form="form" @resetBtn="back" @onSubmit="onSubmit"></projectForm>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-col>
          </span>
          <span v-else-if="display == 'viewInfo'">
            <el-col :span="24" class="viewInfo">
              <el-col :span="24" class="btn">
                <el-button type="primary" size="mini" @click="back">返回列表</el-button>
              </el-col>
              <el-col :span="24" class="viewInfoMess">
                <el-col :span="24" class="title">
                  2022年度吉林省科技发展计划高新技术领域项目建议书
                </el-col>
                <el-col :span="24">
                  <projectInfo :info="form"></projectInfo>
                </el-col>
              </el-col>
            </el-col>
          </span>
          <span v-else-if="display == 'detail'">
            <el-col :span="24" class="detail">
              <el-col :span="24" class="btn">
                <el-button type="primary" size="mini" @click="back">返回列表</el-button>
              </el-col>
              <el-col :span="24" class="form">
                <el-tabs v-model="formActive" type="card">
                  <el-tab-pane label="通知正文" name="first">
                    <questionInfo :info="info"></questionInfo>
                  </el-tab-pane>
                  <el-tab-pane label="信息填报" name="second">
                    <projectForm :form="form" @resetBtn="back" @onSubmit="onSubmit"></projectForm>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-col>
          </span>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import dataTable from '@/components/data-table.vue';
import questionInfo from './parts/questionInfo.vue';
import projectForm from './parts/projectForm.vue';
import projectInfo from './parts/projectInfo.vue';

import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: question } = createNamespacedHelpers('question');
const { mapActions: projectsolic } = createNamespacedHelpers('projectsolic');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: {
    dataTable,
    questionInfo,
    projectForm,
    projectInfo,
  },
  data: function() {
    return {
      // 显示
      display: 'list',
      // 列表
      active: 'first',
      // 已参加列表
      tabs: 'first',
      opera: [
        {
          label: '查看项目征集信息',
          method: 'add',
          display: i => !i.exist,
        },
        {
          label: '查看项目征集信息',
          method: 'edit',
          display: i => i.exist,
        },
      ],
      fields: [
        { label: '信息标题', prop: 'title' },
        { label: '信息来源', prop: 'origin' },
        { label: '发布时间', prop: 'create_date' },
      ],
      // 未参加
      oneList: [],
      oneTotal: 0,
      // 已参加
      twoList: [],
      twoTotal: 0,
      solicList: [],
      solicTotal: 0,
      solicFields: [
        { label: '项目名称', prop: 'name' },
        { label: '项目负责人', prop: 'pro_user' },
        { label: '联系电话', prop: 'pro_phone' },
        { label: '状态', prop: 'status', format: i => (i === '0' ? '草稿' : '已提交') },
      ],
      solicOpera: [
        {
          label: '修改',
          method: 'edit',
          display: i => i.status === '0',
        },
        {
          label: '详情',
          method: 'view',
          display: i => i.status === '1',
        },
      ],
      // 添加，修改
      formActive: 'first',
      // 调研调查信息
      info: {},
      form: {},
      // 修改信息
      updateActive: 'first',
      // 详情
    };
  },
  async created() {
    await this.search({}, true);
    await this.search({}, false);
  },
  methods: {
    ...question({ questionQuery: 'query' }),
    ...projectsolic(['query', 'create', 'update', 'delete']),
    async search({ skip = 0, limit = 10, ...info } = {}, exist) {
      const res = await this.questionQuery({ skip, limit, ...info, exist, user_id: this.user.userid });
      if (this.$checkRes(res)) {
        let type = 'one';
        if (exist) type = 'two';
        this.$set(this, `${type}List`, res.data);
        this.$set(this, `${type}Total`, res.total);
      }
    },
    toAdd({ data }) {
      this.display = 'detail';
      if (data) this.$set(this, 'info', data);
      this.form.question_id = _.get(data, '_id', this.info._id);
      this.form.user_id = this.user.userid;
    },
    async toEdit({ data }) {
      this.display = 'detail';
      this.$set(this, 'info', data);
    },
    async toGetList({ data }) {
      this.$set(this, 'info', data);
      await this.getSolicList({}, data);
      this.tabs = 'sec';
    },
    async getSolicList({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.query({ question_id: this.info._id, user_id: this.user.userid, skip, limit });
      if (this.$checkRes(res)) {
        this.$set(this, 'solicList', res.data);
        this.$set(this, 'solicTotal', res.total);
      }
    },
    toSolicEdit({ data }) {
      this.$set(this, 'form', data);
      this.display = 'update';
    },
    toSolicView({ data }) {
      this.$set(this, 'form', data);
      this.display = 'viewInfo';
    },
    // 提交保存
    async onSubmit({ data }) {
      const dup = _.cloneDeep(data);
      let res;
      if (dup.id) {
        res = await this.update(dup);
      } else {
        res = await this.create(dup);
      }
      if (this.$checkRes(res, '保存成功', res.errmsg || '保存失败')) {
        this.search({}, true);
        this.search({}, false);
        if (this.tabs === 'sec') this.getSolicList();
        this.back();
      }
    },
    // 返回列表
    back() {
      this.form = {};
      this.display = 'list';
      this.search();
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  .leftTop {
    font-size: 18px;
    width: 96%;
    height: 41px;
    line-height: 35px;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
    bottom: 1px;
    margin: 10px;
    font-weight: 600;
    color: #22529a;
  }
  .info {
    padding: 0 40px 0 10px;
    .detail {
      .btn {
        text-align: right;
        margin: 0 0 10px 0;
      }
    }
    .update {
      .btn {
        text-align: right;
        margin: 0 0 10px 0;
      }
    }
    .viewInfo {
      .btn {
        text-align: right;
        margin: 0 0 10px 0;
      }
      .viewInfoMess {
        .title {
          font-size: 25px;
          text-align: center;
          margin: 0 0 30px 0;
        }
      }
    }
  }
}
</style>