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="130px" label-position="left"
            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">

                  <mySelectButton size='large' style="width:100%" @click="handleSelect">
                    <div slot="select" style="width:100%">
                      <el-autocomplete style="width:100%" v-model="ruleForm.clientName" :fetch-suggestions="querySearch"
                        @input="input" placeholder="请输入内容" :trigger-on-focus="false" @select="handleChange">
                      </el-autocomplete>
                    </div>
                  </mySelectButton>
                </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.headId" 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="event">
              <div v-if="showEvent" style="display:flex">
                <span>
                  <el-tag
                    v-for="tag in ruleForm.eventList"
                    :key="tag.value"
                    closable
                    type='info'
                    >
                    {{tag.eventName}} - {{ tag.scenario }}
                  </el-tag>
                </span>
                <span style="margin-left:10px">
                  <my-cascader :options="eventList" @change="change">
                    <i slot="reference" class="el-icon-circle-plus-outline" style="font-size:20px;"></i>
                  </my-cascader>
                </span>
              </div>
            </el-form-item>
            <el-form-item label="应用场景" prop="scenarioList">
              <el-checkbox-group v-model="ruleForm.scenarios" @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>
            <template>
              <div>
                <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 v-if="ruleForm.products">
                      {{ ruleForm.products.name }}
                      <span style="color:blue">
                        ({{ ruleForm.products.treeType==2?'产品':'产品类别' }})
                      </span>
                      <span><i class="el-icon-error cursor_pointer" @click="delProduct"></i></span>
                    </div>
                    <el-button size="small" v-else @click="choseProduct">+ 选择</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="分类架构" prop="structureId" v-if="ruleForm.products && ruleForm.products.fieldId && $permission('/workspace/product')">
                  <my-select-Tree style="width:100%" :options="structureList" @getValue="getStructureId" :props="StructureProp" :value="ruleForm.structureId"></my-select-Tree>
                </el-form-item>
              </div>
            </template>
            <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="volumeNumber">
                  <el-input v-model="ruleForm.volumeNumber" placeholder="请输入内部案卷"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="委案日" prop="commissionCaseDay">
                  <el-date-picker v-model="ruleForm.commissionCaseDay" 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="description">
              <el-input v-model="ruleForm.description" placeholder="请输入备注" type="textarea"></el-input>
            </el-form-item>
          </el-form>
        </el-main>
        <el-footer class="footer-common"
          v-if="($permission('/workspace/project/modify') || $permission('/workspace/project/add')) && ($r(ruleForm.id, [2]) || userinfo.id == ruleForm.createBy)">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
        </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>

    <el-dialog title="选择产品或产品类别" :visible.sync="productVisible" width="1000px" append-to-body destroy-on-close :before-close="closeProduct">
      <div style="height:550px">
        <product :isChoose="true" @chooseItem="chooseItem"></product>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ClientTable from '@/views/client'
import { mapGetters } from 'vuex';

import product from '@/views/product/components/index.vue'
export default {
  components: {
    ClientTable,
    product
  },
  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
      },
      //事件列表
      eventList:[
        {
          label:'事件1',
          value:'1',
          children:[
            {
              label:'1-1',
              value:'3'
            }
          ]
        },
        {
          label:'事件2',
          value:'2'
        },
      ],
      showEvent:true,
      //选择产品或产品类别
      productVisible:false,

    };
  },
  watch: {},
  computed: {
    ...mapGetters(['userinfo'])
  },
  created() { },
  mounted() {
  },
  methods: {
    //获取架构id
    getStructureId(val){

    },
    //获取选中的值
    chooseItem({row,type}){
      this.ruleForm.products = {
              treeType:type,
              fieldId:row.id,
              name:row.name,
              valueIds:[]
      }
      this.closeProduct()
    },
    //删除选择的产品或产品类别
    delProduct(){
      this.ruleForm.products = null
      this.$forceUpdate()
      // this.ruleForm.products=null
    },
    //打开选择产品或产品类别弹窗
    choseProduct(){
      this.productVisible = true

    },
    //关闭弹窗
    closeProduct(){
      this.productVisible = false
    },
    //选择事件
    change(value){
      if(this.ruleForm.eventList){
        
      }else{
        this.ruleForm.eventList = []
      }
      var index = this.ruleForm.eventList.findIndex(item=>{
        return item.eventId == value[0] && item.scenarioId == value[1]
      })
      if(index != -1){
        this.$message.warning('该调查类型已存在')
        this.showEvent = false
        this.$nextTick(()=>{
          this.showEvent = true
        })
        return false
      }
      var obj = {}
        var arr = this.eventList.find(item=>{
            return item.value == value[0]
        })
        obj.eventName = arr.label
        obj.eventId = arr.value
        if(value.length>1){
          var arr2 = arr.children.find(item=>{
                return item.value == value[1]
              })
          obj.scenario = arr2.label
          obj.scenarioId = arr2.value
        }
      this.ruleForm.eventList.push(obj)
      this.showEvent = false
      this.$nextTick(()=>{
        this.showEvent = true
      })
    },
    //打开弹窗
    open(form, title) {
      //获取部门列表
      this.getDepartment()
      //获取人员列表
      this.getPersonnelList()
      this.ruleForm = JSON.parse(JSON.stringify(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, 'entrustId', -1)
    },
    //切换选择委托方
    handleChange(row) {
      this.$set(this.ruleForm, 'entrustId', row.id)
      this.$set(this.ruleForm, 'clientName', row.name)
      this.close2()
    },
    //打开选择委托方弹窗
    handleSelect() {
      this.visible = true
    },
    //获取委托方信息
    getClient(row) {
      this.$set(this.ruleForm, 'entrustId', row.id)
      this.$set(this.ruleForm, 'clientName', row.name)
      this.close2()
    },
    //关闭委托方弹窗
    close2() {
      this.visible = false
    },
    //负责人远程搜索
    remoteMethod(query) {
      
    },
    //负责人下拉懒加载
    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
    },
    //提交数据
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.show = false
          this.loading = true
          if (this.ruleForm.id) {
            this.$api.editProject(this.ruleForm).then(response => {
              this.loading = false
              this.$message.success('编辑成功')
              this.$emit('submit', 0)
              this.close()
            }).catch(error => {
              this.loading = false
            })
          } else {
            this.$api.addProject(this.ruleForm).then(response => {
              this.loading = false
              let permissions = this.permissions
              permissions[response.data] = 0
              this.$store.commit('SET_PERMISSIONS', permissions)
              this.$message.success('新增成功')
              this.$emit('submit', 1)
              this.close()
            }).catch(error => {
              this.show = true
              this.loading = false
            })
          }
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped></style>