工程状态在规划中、筹备中、在建中允许添加承包商信息

src/views/educTrainLearn/examTask/index.vue

@@ -28,7 +28,7 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
+            <el-button type="primary" icon="el-icon-search" @click="handleQuery()">查询</el-button>
             <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
           </el-form-item>
         </el-form>

src/views/pro/projectManagement/outsourcingPro/editOutsourcingPro.vue

@@ -182,22 +182,32 @@
           :key="domain.key"
         >
           <el-col :span="7">
-            <el-select v-model="domain.value" placeholder="请选择承包商"  clearable :disabled="true"
+            <el-select v-model="domain.value" placeholder="请选择承包商" clearable
                        :style="{width: '100%'}"
-                       @change="changeLonLat(domain.value,index)"
+                       @change="changeCons(domain.value,index)"
             >
-              <el-option v-for="(option, i) in consOptions"  :key="i" :label="option.label" :value="option.value"
+              <el-option v-for="(option, i) in consOptions" :key="i" :label="option.label" :value="option.value"
                          :disabled="option.disabled"
               ></el-option>
             </el-select>
           </el-col>
+
           <el-col :span="12">
-            <el-checkbox-group v-model="domain.checkList"  style="margin-left: 2%;">
+            <el-checkbox-group v-model="domain.checkList" style="margin-left: 2%;">
-              <el-checkbox v-for="(option,index) in materialOptions" :label="option.value" :key="index" disabled>
+              <el-checkbox v-for="(option,index) in materialOptions" :label="option.value" :key="index" >
                 {{ option.label }}
               </el-checkbox>
             </el-checkbox-group>
           </el-col>
+          <el-col :span="4">
+            <el-button type="primary" plain size="medium" icon="el-icon-circle-plus" circle
+                       @click="addConsOption"
+            ></el-button>
+            <el-button v-if="index !== 0" v-show="true" type="danger" plain icon="el-icon-remove" circle
+                       @click="removeConsOption(domain)"
+            ></el-button>
+            <el-button v-show="index === 0" type="primary" @click="addCons">新增承包商单位</el-button>
+          </el-col>
         </el-form-item>
       </el-row>
       <h2 style="color: #409EFF;background: #e8e8e8;padding: 15px;border-radius: 10px">其他信息</h2>
@@ -225,10 +235,69 @@
       >
       </bns-map>
     </el-dialog>
-
+    <!--   创建承包商单位 -->
+    <el-dialog :title="'创建承包商单位'" :visible.sync="consFormOpen" width="30%" :close-on-click-modal="false">
+      <el-form ref="consForm" :model="consForm" :rules="consRules" size="medium" label-width="100px">
+        <el-form-item label="承包商单位名称" prop="consName" label-width="170px">
+          <el-input v-model="consForm.consName" placeholder="请输入承包商单位名称" show-word-limit :maxlength="60"
+                    @blur="checkIsExistConsName" v-no-whitespace
+                    clearable
+                    :style="{width: '100%'}"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="单位地址" prop="consAddress" label-width="170px">
+          <el-input v-model="consForm.consAddress" placeholder="请输入单位地址" show-word-limit :maxlength="200"
+                    clearable v-no-whitespace
+                    :style="{width: '100%'}"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="法人姓名" prop="corporateName" label-width="170px">
+          <el-input v-model="consForm.corporateName" placeholder="请输入法人姓名" show-word-limit :maxlength="20"
+                    clearable v-no-whitespace
+                    :style="{width: '100%'}"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="法人联系方式" prop="corporatePhone" label-width="170px">
+          <el-input v-model="consForm.corporatePhone" placeholder="请输入法人联系方式" show-word-limit :maxlength="11"
+                    clearable v-no-whitespace
+                    :style="{width: '100%'}"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="社会统一征信代码" prop="socialUnifiedCreditCode" label-width="170px">
+          <el-input v-model="consForm.socialUnifiedCreditCode" placeholder="请输入社会统一征信代码" show-word-limit
+                    :maxlength="20" clearable v-no-whitespace
+                    :style="{width: '100%'}"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="承包商负责人" prop="contractorPrincipal" label-width="170px">
+          <el-input v-model="consForm.contractorPrincipal" placeholder="请输入承包商负责人" show-word-limit
+                    :maxlength="20" clearable v-no-whitespace
+                    :style="{width: '100%'}"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="承包商负责人联系方式" prop="contractorPrincipalPhone" label-width="170px">
+          <el-input v-model="consForm.contractorPrincipalPhone" placeholder="请输入承包商负责人联系方式" show-word-limit
+                    :maxlength="11" clearable v-no-whitespace
+                    :style="{width: '100%'}"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="承包商负责人身份证" prop="contractorPrincipalIdCard" label-width="170px">
+          <el-input v-model="consForm.contractorPrincipalIdCard" placeholder="请输入承包商负责人身份证" show-word-limit
+                    :maxlength="18" clearable v-no-whitespace
+                    :style="{width: '100%'}"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitConsForm" v-preventReClick="5000">提 交</el-button>
+        <el-button @click="consCancel">取 消</el-button>
+      </div>
+    </el-dialog>
 
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="submitForm" :style="{float:'right',marginLeft:'10px'}" v-preventReClick="5000">提 交</el-button>
+      <el-button type="primary" @click="submitForm" :style="{float:'right',marginLeft:'10px'}" v-preventReClick="5000">提
+        交
+      </el-button>
       <el-button @click="resetForm" :style="{float:'right'}">取 消</el-button>
     </div>
   </div>
@@ -237,7 +306,8 @@
 <script>
 import { dictTableOption, selectCons, selectMaterial, selectProAddress, selectSupervisionUnit } from '@/api/tool/select'
 import bnsMap from '@/components/pro-tabs/bns-map.vue'
-import { selectProInfoDetails, editProInfo } from '@/api/pro/proList'
+import { selectProInfoDetails, editProInfo, addConsUnit, checkIsExistConsName } from '@/api/pro/proList'
+import numberUtils from '@/utils/validate'
 
 export default {
   components: { bnsMap },
@@ -246,6 +316,8 @@ export default {
     return {
       // 遮罩层
       loading: true,
+      // 是否显示创建承包商单位弹出层
+      consFormOpen: false,
       // 是否显示创建工程地址弹出层
       open: false,
       // 工程地址form表单
@@ -255,21 +327,70 @@ export default {
         proAddress: [{
           required: true,
           message: '请输入工程地址',
-          trigger: 'blur'
+          trigger: 'blur',
         }],
         lon: [{
           required: true,
           message: '请输入经度',
-          trigger: 'blur'
+          trigger: 'blur',
         }],
         lat: [{
           required: true,
           message: '请输入纬度',
-          trigger: 'blur'
+          trigger: 'blur',
-        }]
+        }],
       },
       //工程地址
       mapItems: {},
+      // 承包商单位form表单
+      consForm: {},
+      //承包商单位form表单 校验
+      consRules: {
+        consName: [{
+          required: true,
+          message: '请输入承包商单位名称',
+          trigger: 'blur',
+        }],
+        consAddress: [{
+          required: true,
+          message: '请输入单位地址',
+          trigger: 'blur',
+        }],
+        corporateName: [{
+          required: true,
+          message: '请输入法人姓名',
+          trigger: 'blur',
+        }],
+        corporatePhone: [{
+          required: true,
+          validator: numberUtils.checkPhone,
+          trigger: 'blur',
+        }],
+        socialUnifiedCreditCode: [{
+          required: true,
+          message: '请输入社会统一征信代码',
+          trigger: 'blur',
+        }, {
+          pattern: /^[a-zA-Z0-9]+$/,
+          message: '请输入数字或字母',
+          trigger: 'blur',
+        }],
+        contractorPrincipal: [{
+          required: true,
+          message: '请输入承包商负责人',
+          trigger: 'blur',
+        }],
+        contractorPrincipalPhone: [{
+          required: true,
+          validator: numberUtils.checkPhone,
+          trigger: 'blur',
+        }],
+        contractorPrincipalIdCard: [{
+          required: true,
+          validator: numberUtils.checkIdCardNumber,
+          trigger: 'blur',
+        }],
+      },
       gutterValue: parseInt('24', 10),
       mainFormFields: [  // 主表单字段定义
         {
@@ -278,10 +399,10 @@ export default {
           type: 'select',
           labelWidth: '120px',
           disabled: false,
-          options: this.proAddressOptions
+          options: this.proAddressOptions,
         },
         { label: '经度', prop: 'lon', type: 'input', labelWidth: '120px', disabled: true },
-        { label: '纬度', prop: 'lat', type: 'input', labelWidth: '120px', disabled: true }
+        { label: '纬度', prop: 'lat', type: 'input', labelWidth: '120px', disabled: true },
       ],
       formData: {
         // 承包商数量
@@ -321,53 +442,53 @@ export default {
             value: '',
             lon: '',
             lat: '',
-            key: Date.now()
+            key: Date.now(),
-          }
+          },
         ],
         //承包商
         consArr: [],
         //创建人
         createPerson: '',
         //创建时间
-        createTime: ''
+        createTime: '',
       },
       //主表单校验
       rules: {
         proName: [{
           required: true,
           message: '请输入工程名称',
-          trigger: 'blur'
+          trigger: 'blur',
         }],
         proLeader: [{
           required: true,
           message: '请输入工程负责人',
-          trigger: 'blur'
+          trigger: 'blur',
         }],
         proLeaderPhone: [{
           required: true,
           message: '请输入负责人联系方式',
-          trigger: 'blur'
+          trigger: 'blur',
         }],
         supervisorUnit: [{
           required: true,
           message: '请选择监理单位',
-          trigger: 'change'
+          trigger: 'change',
         }],
         startDate: [{
           required: true,
           message: '请选择开工期日计划开工日期',
-          trigger: 'change'
+          trigger: 'change',
         }],
         endDate: [{
           required: true,
           message: '请选择计划竣工日期',
-          trigger: 'change'
+          trigger: 'change',
         }],
         proType: [{
           required: true,
           message: '请选择工程类型',
-          trigger: 'change'
+          trigger: 'change',
-        }]
+        }],
       },
       //工程类型下拉选
       proTypeOptions: [],
@@ -381,11 +502,11 @@ export default {
       //工程地址选项
       proAddressOptions: [],
       paramsData: {},
-      proId:''
+      proId: '',
     }
   },
   created() {
-    this.proId = this.$route.params && this.$route.params.proId;
+    this.proId = this.$route.params && this.$route.params.proId
     this.getProType()
     this.getStatus()
     this.getProAddress()
@@ -405,15 +526,15 @@ export default {
           this.getProAddress()
         }
       },
-      deep: true // 监听对象或数组的变化
+      deep: true, // 监听对象或数组的变化
-    }
+    },
   },
   methods: {
     //获取工程类型
     getProType() {
       const params = {
         dictType: 'sys_pro_type',
-        dictValue: ''
+        dictValue: '',
       }
       dictTableOption(params).then(response => {
         this.proTypeOptions = response.data
@@ -423,7 +544,7 @@ export default {
     getStatus() {
       const params = {
         dictType: 'sys_pro_status',
-        dictValue: ''
+        dictValue: '',
       }
       dictTableOption(params).then(response => {
         this.proStatusOptions = response.data
@@ -467,6 +588,72 @@ export default {
         this.loading = false
       })
     },
+    //检查承包商单位名称是否存在
+    async checkIsExistConsName() {
+      const params = {
+        consName: this.consForm.consName,
+      }
+      try {
+        const response = await checkIsExistConsName(params)
+        if (response.code === 500) {
+          this.$message({
+            message: response.msg,
+            type: 'error',
+          })
+          // 返回 false 或者其他值，表示单位名称已存在
+          return false
+        } else {
+          // 返回 true 或者其他值，表示单位名称不存在重复
+          return true
+        }
+      } catch (error) {
+        return false
+      }
+    },
+    //提交承包商表单
+    async submitConsForm() {
+      this.$refs['consForm'].validate(async valid => {
+        if (!valid) {
+          return false
+        } else {
+          // 前端验证通过，再进行唯一性检查
+          const isExist = await this.checkIsExistConsName()
+          if (isExist === false) {
+            // 如果单位名称已存在，可以做出相应的提示或处理
+            return
+          }
+          // TODO 提交表单
+          addConsUnit(this.consForm).then(response => {
+            if (response.code === 200) {
+              this.$message({
+                message: '新建成功',
+                type: 'success',
+              })
+              this.getCons()
+              for (let i = 0; i < this.consOptions.length; i++) {
+                if (this.consOptions[i].label === this.consForm.consName) {
+                  this.formData.consArr[this.formData.consArr.length - 1].value = this.consOptions[i].value
+                  this.formData.consArr[this.formData.consArr.length - 1].label = this.consOptions[i].label
+                }
+              }
+
+              this.consResetForm()
+              this.consFormOpen = false
+            } else {
+              this.$message({
+                message: response.msg,
+                type: 'error',
+              })
+            }
+          })
+        }
+      })
+    },
+    //承包商单位表单重置
+    consCancel() {
+      this.consResetForm()
+      this.consFormOpen = false
+    },
     //提交工程表单
     submitForm() {
       this.$refs['elForm'].validate(valid => {
@@ -474,11 +661,11 @@ export default {
         console.log(this.formData)
         if (!valid) {
           return false
-        }else{
+        } else {
-          if (this.hasDuplicates(this.formData.proAddress,'label')){
+          if (this.hasDuplicates(this.formData.proAddress, 'label')) {
             this.$message({
               message: '工程地址不能重复',
-              type: 'error'
+              type: 'error',
             })
             return false
           }
@@ -486,12 +673,19 @@ export default {
             if (response.code === 200) {
               this.$message({
                 message: '修改成功',
-                type: 'success'
+                type: 'success',
               })
               //关闭tab页
               this.$tab.closePage()
             }
           })
+          if (this.hasDuplicates(this.formData.consArr,'label')){
+            this.$message({
+              message: '承包商不能重复',
+              type: 'error'
+            })
+            return false
+          }
         }
         // TODO 提交表单
       })
@@ -512,6 +706,7 @@ export default {
       }
       return false
     },
+
     //工程表单重置
     resetForm() {
       this.$refs['elForm'].resetFields()
@@ -522,7 +717,7 @@ export default {
       this.form = {
         proAddress: undefined,
         lon: undefined,
-        lat: undefined
+        lat: undefined,
       }
       this.resetForm('proAddressForm')
     },
@@ -544,9 +739,42 @@ export default {
         value: '',
         lon: '',
         lat: '',
-        key: Date.now()
+        key: Date.now(),
       })
     },
+    //添加承包商选项
+    addConsOption() {
+      this.formData.consArr.push({
+        label: '',
+        value: '',
+        checkList: [],
+        key: Date.now(),
+      })
+    },
+    //移除承包商选项
+    removeConsOption(item) {
+      const i = this.formData.consArr.indexOf(item)
+      if (i !== -1) {
+        this.formData.consArr.splice(i, 1)
+      }
+    },
+    addCons() {
+      //创建监理单位
+      this.consResetForm()
+      this.consFormOpen = true
+    },
+    //承包商表单重置
+    consResetForm() {
+      this.consForm = {
+        consName: undefined,
+        consAddress: undefined,
+        corporateName: undefined,
+        corporatePhone: undefined,
+        socialUnifiedCreditCode: undefined,
+        contractorPrincipal: undefined,
+        contractorPrincipalPhone: undefined,
+      }
+    },
     //移除工程地址选项
     removeAddressOption(item) {
       const i = this.formData.proAddress.indexOf(item)
@@ -569,6 +797,20 @@ export default {
         }
       }
     },
+
+    //更改承包商名称值
+    changeCons(e, index) {
+      if (e === undefined || e === '') {
+        return
+      }
+      for (let i = 0; i < this.consOptions.length; i++) {
+        const item = this.consOptions[i]
+        if (e === item.value) {
+          this.formData.consArr[index].label = item.label
+          this.formData.consArr[index].value = item.value
+        }
+      }
+    },
     clearAddress(index) {
       this.formData.proAddress[index].lon = ''
       this.formData.proAddress[index].lat = ''
@@ -576,8 +818,8 @@ export default {
     closeMain() {
       this.open = false
       console.log('closeMain')
-    }
+    },
-  }
+  },
 }
 
 </script>