cms-zhwl/src/views/client/contract.vue

<template>
  <div id="contract">
    <el-row>
      <el-col :span="24" class="container">
        <el-col :span="24" class="top">
          <el-button type="primary" size="mini" @click="dialog = true">添加</el-button>
        </el-col>
        <el-col :span="24" class="info">
          <!-- :select="true"在前面加上复选框  @handleSelect="toSelect"给复选框添加点击事件，如果想要点击事件好用的话列表必须给一个id要不然点击区分不了是不是同一个数据-->
          <data-table
            :fields="fields"
            :data="list"
            :opera="opera"
            :total="total"
            :size="50"
            :step="10"
            :select="true"
            @editor="editor"
            @delete="toDelete"
            @see="see"
            @query="searchTreaty"
            @handleSelect="toSelect"
            :toFormat="roleSelect"
          >
            <template #options="{item}">
              <template v-if="item.model == 'client'">
                <el-option v-for="(item, index) in nameList" :key="index" :value="item.id" :label="item.name"></el-option>
              </template>
            </template>
            <template #filterEnd>
              <el-button v-if="selected.length <= 0" type="primary" :disabled="true">未选择任何合同</el-button>
              <el-button v-else type="primary" @click="toExport">导出选中合同</el-button>
            </template>
          </data-table>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialog" title="客户合同详情" @close="toClose" width="50%">
      <!-- 物流里面的:data要换成v-model -->
      <data-form v-model="form" :fields="fields" @save="turnSave" :rules="rules">
        <template #options="{item}">
          <template v-if="item.model == 'client'">
            <el-option v-for="(item, index) in nameList" :key="index" :value="item.id" :label="item.name"></el-option>
          </template>
          <template v-if="item.model == 'status'">
            <el-option v-for="(item, index) in item.list" :key="index" :value="item.value" :label="item.label"></el-option>
          </template>
        </template>
      </data-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: treaty } = createNamespacedHelpers('treaty');
const { mapActions: client } = createNamespacedHelpers('client');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'contract',
  props: {},
  components: {},
  data: function() {
    return {
      fields: [
        { label: '客户', model: 'client', filter: 'select', type: 'select', format: true },
        { label: '合同编号', model: 'number', filter: 'input' },
        { label: '甲方', model: 'jf' },
        { label: '乙方', model: 'yf' },
        { label: '合同周期', model: 'period' },
        { label: '结算方式', model: 'settle_up' },
        { label: '结算周期', model: 'settle_up_period' },
        {
          label: '状态',
          model: 'status',
          filter: 'select',
          type: 'select',
          formact: i => (i === '0' ? '使用' : '禁用'),
          list: [
            { label: '使用', value: '0' },
            { label: '禁用', value: '1' },
          ],
        },
        { label: '创始人', model: 'owner', notable: true, noform: true },
      ],
      list: [],
      total: 0,
      opera: [
        { label: '编辑', method: 'editor' },
        { label: '查看项目', method: 'see' },
        { label: '删除', method: 'delete' },
      ],
      dialog: false,
      form: {},
      rules: {
        client: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
        number: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
        jf: [{ required: true, message: '请输入甲方名称', trigger: 'blur' }],
        yf: [{ required: true, message: '请输入乙方名称', trigger: 'blur' }],
        period: [{ required: true, message: '请输入合同周期', trigger: 'blur' }],
        settle_up: [{ required: true, message: '请输入结算方式', trigger: 'blur' }],
        settle_up_period: [{ required: true, message: '请输入结算周期', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
      },
      //客户列表
      nameList: [],
      selected: [],
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...treaty(['query', 'create', 'update', 'delete']),
    ...client({ cQuery: 'query', cCreate: 'create', cUpdate: 'update', cDelete: 'delete' }),
    async search() {
      //查客户
      const res = await this.cQuery({ type: '客户' });
      if (this.$checkRes(res)) {
        this.$set(this, `nameList`, res.data);
      }
    },
    // 查合同 其他参数是...info，都包括在里面，可以输出看看
    async searchTreaty({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        const { data, total } = res;
        this.$set(this, `list`, data);
        this.$set(this, `total`, total);
      }
    },
    //关闭
    toClose() {
      this.form = {};
      this.dialog = false;
    },
    //保存
    async turnSave({ data }) {
      let client = data.client;
      if (data.id) {
        const res = await this.update(data);
        if (this.$checkRes(res, '修改成功', res.errmsg || '修改失败')) {
          this.searchTreaty({ client });
          this.toClose();
        }
      } else {
        //谁登陆owner就是谁，把id赋予上面就行
        data.owner = this.user.id;
        const res = await this.create(data);
        if (this.$checkRes(res, '创建成功', res.errmsg || '创建失败')) {
          this.searchTreaty({ client });
          this.toClose();
        }
      }
    },

    //编辑
    editor({ data }) {
      this.$set(this, `form`, data);
      this.dialog = true;
    },
    //刪除
    async toDelete({ data }) {
      let client = data.client;
      const res = await this.delete(data.id);
      if (this.$checkRes(res, '删除成功', res.errmsg || '删除失败')) {
        this.searchTreaty({ client });
      }
    },
    //查看項目
    see() {
      this.$router.push({ path: '/client/project' });
    },
    toSelect(data) {
      this.selected = data;
    },
    toExport() {
      console.log('导出');
    },
    roleSelect({ model, value }) {
      if (model == 'client') {
        let arr = this.nameList.find(i => i.id === value);
        if (arr) return arr.name;
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

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