web-test/src/views/superAdminCenter/investigation/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <span v-if="display == 'list'">
          <el-col :span="24" class="btn">
            <el-button type="primary" size="mini" @click="add">添加信息</el-button>
          </el-col>
          <el-col :span="24" class="list">
            <data-table
              :fields="fields"
              :data="list"
              :total="total"
              @query="search"
              :opera="opera"
              @view="toView"
              @edit="toEdit"
              @delete="toDelete"
            ></data-table>
          </el-col>
        </span>
        <span v-else-if="display == 'detail'">
          <el-col :span="24" class="btn">
            <el-button type="primary" size="mini" @click="back">返回列表</el-button>
          </el-col>
          <el-col :span="24" class="detail">
            <data-form :data="form" :fields="formFields" @save="toSave">
              <template #custom="{item, form}">
                <template v-if="item.model === 'img_path'">
                  <upload :limit="1" :data="form.img_path" type="img_path" :url="'/files/img_path/upload'" @upload="uploadSuccess"></upload>
                </template>
                <template v-if="item.model === 'file_path'">
                  <uploadfile
                    :limit="1"
                    :data="form.file_path"
                    type="file_path"
                    listType=""
                    :url="'/files/file_path/upload'"
                    @upload="sucfile"
                    @delete="delfile"
                  ></uploadfile>
                </template>
              </template>
            </data-form>
          </el-col>
        </span>
        <span v-else-if="display == 'projectList'">
          <el-col :span="24" class="btn">
            <el-button type="primary" size="mini" @click="back">返回列表</el-button>
          </el-col>
          <el-col :span="24" class="projectList">
            <data-table :fields="profields" :opera="proopera" :data="prolist" :total="prototal" @query="prosearch"></data-table>
          </el-col>
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dataTable from '@/components/data-table.vue';
import dataForm from '@/components/form.vue';
import upload from '@/components/uploadone.vue';
import uploadfile from '@/components/uploaddock.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,
    dataForm,
    upload,
    uploadfile,
  },
  data: function() {
    return {
      // 显示
      display: 'list',
      opera: [
        {
          label: '查看项目征集',
          method: 'view',
        },
        {
          label: '编辑',
          method: 'edit',
        },
        {
          label: '删除',
          method: 'delete',
        },
      ],
      fields: [
        { label: '信息标题', prop: 'title' },
        { label: '信息来源', prop: 'origin' },
        { label: '发布时间', prop: 'create_date' },
      ],
      list: [],
      total: 0,
      // 添加数据
      form: {},
      formFields: [
        { label: '信息标题', model: 'title' },
        { label: '发布时间', model: 'create_date', type: 'date' },
        { label: '信息来源', model: 'origin' },
        { label: '图片', model: 'img_path', custom: true },
        { label: '附件', model: 'file_path', custom: true },
        { label: '信息内容', model: 'content', type: 'editor' },
      ],
      // 项目征集列表
      proid: '',
      proopera: [],
      profields: [
        { label: '项目名称', prop: 'name' },
        { label: '建议单位', prop: 'company' },
        { label: '联系人', prop: 'contacts' },
        { label: '联系方式', prop: 'phone' },
      ],
      prolist: [],
      prototal: 0,
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...question(['query', 'create', 'update', 'delete']),
    ...projectsolic({ solicQuery: 'query', solicFetch: 'fetch' }),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    // 修改
    toEdit({ data }) {
      this.$set(this, 'form', _.cloneDeep(data));
      this.display = 'detail';
    },
    // 删除
    async toDelete({ data }) {
      const res = await this.delete(data.id);
      if (this.$checkRes(res, '删除成功', '删除失败' || res.errmsg)) {
        this.search();
      }
    },
    // 添加数据
    add() {
      this.display = 'detail';
    },
    // 添加，修改
    async toSave({ 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();
        this.back();
      }
    },
    // 查看项目征集
    toView({ data }) {
      this.display = 'projectList';
      this.$set(this, `proid`, data._id);
      this.prosearch();
    },

    // 查看调研调查中的项目征集数据
    async prosearch({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.solicQuery({ skip, limit, question_id: this.proid });
      if (this.$checkRes(res)) {
        this.$set(this, `prolist`, res.data);
        this.$set(this, `prototal`, res.total);
      }
    },
    // 返回列表
    back() {
      this.form = {};
      this.display = 'list';
      this.search();
    },
    // 图片上传
    uploadSuccess({ type, data }) {
      this.$set(this.form, `${type}`, data.uri);
    },
    // 视频文件
    sucfile({ type, data }) {
      this.$set(this.form, `${type}`, data.uri);
    },
    delfile(index) {
      this.$set(this.form, `file_path`, '');
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

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