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.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 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>
  </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(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>