xiaoshi_system/src/views/project/components/drawer/form.vue

<template>
  <div>
    <el-drawer class="custom-drawer-form" :title="title" size="800px" append-to-body :visible.sync="drawer" direction="rtl" :before-close="close" destroy-on-close>
        <el-container>
            <el-main>
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="专题库名称：" prop="name">
                  <el-input v-model="ruleForm.name" placeholder="请输入专题库名称"></el-input>
                </el-form-item>
                <template>
                  <div>
                    <el-form-item label="委托方：" prop="name" v-if="userinfo.tenantType == 1">
                      <el-autocomplete
                        style="width:100%"
                        v-model="ruleForm.clientName"
                        :fetch-suggestions="querySearch"
                        @input="input"
                        placeholder="请输入内容"
                        :trigger-on-focus="false"
                        @select="handleChange"
                      >
                      <el-button slot="append" icon="el-icon-search" @click="handleSelect"></el-button>
                      </el-autocomplete>
                    </el-form-item>
                    <el-form-item label="委托部门：" prop="name" v-else>
                      <mySelectTree style="width:100%" v-model="ruleForm.departmentId" :options="departmentList"></mySelectTree>
                    </el-form-item>
                  </div>
                </template>
                <el-form-item label="负责部门：" prop="departmentId">
                  <mySelectTree style="width:100%" v-model="ruleForm.departmentId" :options="departmentList"></mySelectTree>
                </el-form-item>
                <el-form-item label="负责人：" prop="person">
                  <el-select style="width:100%" v-model="ruleForm.personnelId" filterable remote clearable placeholder="请选择" :loading="loading" v-SelectLazyLoading="lazyLoading" :remote-method="remoteMethod">
                    <el-option
                      v-for="item in personnelList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="应用场景：" prop="scenarioList">
                  <el-checkbox-group v-model="ruleForm.scenarioList" @change="onChange">
                    <el-checkbox v-for="item in commonData.ENTERPRISE_APPLICATION_SCENARIO" :key="item.value" :label="parseInt(item.value)">{{ item.label }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="调查类型：" prop="typeList" v-if="show==true">
                  <el-checkbox-group v-model="ruleForm.typeList">
                    <template v-for="(item, index) in dictAssociateData">
                      <el-checkbox :label="parseInt(item.dictChildValue)">
                        {{ item.dictChildLabel }}
                      </el-checkbox>
                      <div v-if="index === dictAssociateData.length - 1" class="more-data-box">
                        <el-link v-if="moreData" type="primary" icon="el-icon-arrow-down" @click="handleMoreData(0)">更多
                        </el-link>
                        <el-link v-else type="primary" icon="el-icon-arrow-up" @click="handleMoreData(1)">收起</el-link>
                      </div>
                    </template>
                    <div v-show="isShow">
                      <el-checkbox v-for="item in dictSecondAssociateData" :label="parseInt(item.dictChildValue)">
                        {{ item.dictChildLabel }}
                      </el-checkbox>
                    </div>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="产品类别/产品：" prop="productId" v-if="$permission('/workspace/product')">
                  <div>
                    <mySelectButton size='large' style="width:100%">
                      <div slot="select" style="width:100%">
                        <mySelectTree style="width:100%" v-model="ruleForm.departmentId" :options="departmentList"></mySelectTree>
                      </div>
                    </mySelectButton>
                  </div>
                </el-form-item>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="合同号：" prop="contractNo">
                      <el-input v-model="ruleForm.contractNo" placeholder="请输入合同号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="内部案卷：" prop="innerFile">
                      <el-input v-model="ruleForm.innerFile" placeholder="请输入内部案卷"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="委案日：" prop="caseDate">
                      <el-date-picker v-model="ruleForm.caseDate" value-format="yyyy-MM-dd" type="date" placeholder="请选择委案日" class="width_100"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="处理状态：" prop="status">
                      <el-select v-model="ruleForm.status" placeholder="请输入处理状态" class="width_100">
                        <el-option value="0" label="处理中"></el-option>
                        <el-option value="1" label="已完成"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="备注：" prop="remark">
                  <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea"></el-input>
                </el-form-item>
              </el-form>
            </el-main>
            <el-footer></el-footer>
        </el-container>
    </el-drawer>

    <el-dialog title="选择委托方" :visible.sync="visible" width="800px" append-to-body destroy-on-close :before-close="close2" top="10vh">
      <ClientTable :choseClient="true" @getClient="getClient"></ClientTable>
    </el-dialog>
  </div>
</template>

<script>
import ClientTable from '@/views/client'
import { mapGetters } from 'vuex';
export default {
  components: {
    ClientTable
  },
  props: {
    commonData: Object
  },
  data() {
    return {
        //抽屉标题
        title:'',
        //抽屉开关标识
        drawer:false,
        //表单数据
        ruleForm:{},
        //表单规则
        rules:{},
        //控制选择委托方弹窗
        visible:false,
        //部门列表
        departmentList:[],
        //人员列表
        personnelList:[],
        //负责人下拉加载
        loading:false,
        //显示调查类型
        show:false,
        //显示更多调查类型
        isShow: false,
        //显示更多和收起按钮
        moreData: true,
        //调查类型列表
        dictAssociateData: [],
        //其他调查类型
        dictSecondAssociateData: [],
        //用来获取调查类型
        test: {
          value: '1',
          type: 'ENTERPRISE_APPLICATION_SCENARIO',
          flag: 1
        },
    };
  },
  watch: {},
  computed: {
    ...mapGetters(['userinfo'])
  },
  created() {},
  mounted() {
  },
  methods: {
    //打开弹窗
    open(form,title){
      //获取部门列表
      this.getDepartment()
      //获取人员列表
      this.getPersonnelList()
      this.ruleForm = form
      this.title = title
      this.drawer = true
    },
    //获取部门列表
    getDepartment() {
			this.$api.getPermissionDepartmentList().then((response) => {
				this.departmentList = response.data;
			});
		},
    //获取人员列表
    getPersonnelList(){
      this.$api.getPermissionPersonnelList().then((response)=>{
        this.personnelList=response.data
      })
    },
    //关闭抽屉
    close(){
        this.drawer = false
    },
    //远程搜索（建议调取接口获取）
    querySearch(queryString, cb) {
        // var clientList = this.clientList;
        // var results = (queryString ? clientList.filter(this.createFilter(queryString)) : clientList).map(item=>{
        //   return {
        //     value:item.name,
        //     name:item.name,
        //     id:item.id
        //   }
        // });
        // // 调用 callback 返回建议列表的数据
        // cb(results);
      },
      createFilter(queryString) {
        return (clientList) => {
          return (clientList.name && clientList.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
        };
      },
      //输入框输入事件（委托方）
      input() {
        this.$set(this.ruleForm, 'clientId', -1)
      },
      //切换选择委托方
      handleChange(row) {
        this.$set(this.ruleForm, 'clientId', row.id)
        this.$set(this.ruleForm, 'clientName', row.name)
        this.close2()
      },
      //打开选择委托方弹窗
      handleSelect() {
        this.visible = true
      },
      //获取委托方信息
      getClient(row){
        this.$set(this.ruleForm, 'clientId', row.id)
        this.$set(this.ruleForm, 'clientName', row.name)
        this.close2()
      },
      //关闭委托方弹窗
      close2(){
        this.visible = false
      },
      //负责人远程搜索
      remoteMethod(){

      },
      //负责人下拉懒加载
      lazyLoading(){

      },
      //应用场景选择切换
      onChange() {
        if(this.ruleForm.scenarioList.length!=0){
          this.show=true
          this.test.value = this.ruleForm.scenarioList.toString()
          this.test.flag = 1
          this.$api.getDictTreeByParentDictValue(this.test).then(response => {
            this.dictAssociateData = response.data
            this.test.value = this.ruleForm.scenarioList.toString()
            this.test.flag = 0
            this.$api.getDictTreeByParentDictValue(this.test).then(response => {
              this.dictSecondAssociateData = response.data
            })
          })
        }else{
          this.show=false
        }
      },
      //调查类型展开收起
      handleMoreData(type) {
        if (type === 0) {
          this.isShow = true
          this.test.value = this.ruleForm.scenarioList.toString()
          this.test.flag = 0
          this.$api.getDictTreeByParentDictValue(this.test).then(response => {
            this.dictSecondAssociateData = response.data
          })
        } else if (type === 1) {
          this.isShow = false
        }
        this.moreData = !this.moreData
      },
  },
};
</script>
<style lang="scss" scoped>
</style>