增加编辑时候的表单控制，合同开始结束时间的控制，表单提交二次确认

src/views/contract/components/addContract.vue

@@ -8,12 +8,12 @@
         <div class="container">
             <el-form :model="formData" :rules="addFormValidRules" ref="form" class="contract-form">
                 <el-descriptions :column="3" border class="contract-description-form">
-                    <el-descriptions-item label="母合同名称" :span="3" v-if="parseInt(formData.contractNature) === 2">
+                    <el-descriptions-item labelClassName="required" label="母合同名称" :span="3" v-if="parseInt(formData.contractNature) === 2">
                         <el-form-item prop="contractParent">
                             <el-select v-model="formData.contractParent" :style="{ width: '100%' }"
                                 placeholder="请选择母合同名称">
                                 <el-option v-for="(item, index) in contractParentList" :key="item.contractId"
-                                    :value="item.contractId" :label="item.name"></el-option>
+                                    :value="item.contractId" :label="item.contractName"></el-option>
                             </el-select>
                         </el-form-item>
                     </el-descriptions-item>
@@ -27,9 +27,9 @@
                     <el-descriptions-item label="合同性质" labelClassName="required">
                         {{ contractNatures[formData.contractNature] }}
                     </el-descriptions-item>
-                    <el-descriptions-item label="合同乙方" labelClassName="required">
+                    <el-descriptions-item label="合同乙方" labelClassName="required" :disabled="isEdit">
                         <el-form-item prop="contractPaetyb">
-                            <el-input placeholder="请输入合同名称合同乙方" v-model="formData.contractPaetyb"></el-input>
+                            <el-input placeholder="请输入合同名称合同乙方" :disabled="isEdit" v-model="formData.contractPaetyb"></el-input>
                         </el-form-item>
                     </el-descriptions-item>
                     <el-descriptions-item label="合同编号" labelClassName="required">
@@ -48,30 +48,30 @@
 
                     <el-descriptions-item label="客户名称(甲方)" labelClassName="required">
                         <el-form-item prop="contractFirstParty">
-                            <el-input placeholder="请输入客户名称(甲方)" v-model="formData.contractFirstParty"></el-input>
+                            <el-input placeholder="请输入客户名称(甲方)" :disabled="isEdit" v-model="formData.contractFirstParty"></el-input>
                         </el-form-item>
                     </el-descriptions-item>
                     <el-descriptions-item label="甲方签订人" labelClassName="required">
                         <el-form-item prop="firstParty">
-                            <el-input placeholder="请输入甲方签订人" v-model="formData.firstParty"></el-input>
+                            <el-input placeholder="请输入甲方签订人" :disabled="isEdit" v-model="formData.firstParty"></el-input>
                         </el-form-item>
                     </el-descriptions-item>
                     <el-descriptions-item label="客户联系电话" labelClassName="required">
                         <el-form-item prop="firstPartyPhone">
-                            <el-input placeholder="请输入客户联系电话" v-model="formData.firstPartyPhone"></el-input>
+                            <el-input placeholder="请输入客户联系电话" :disabled="isEdit" v-model="formData.firstPartyPhone"></el-input>
                         </el-form-item>
                     </el-descriptions-item>
 
                     <el-descriptions-item label="客户联系地址" labelClassName="required">
                         <el-form-item prop="firstPartyAddress">
-                            <el-input placeholder="请输入客户联系地址" v-model="formData.firstPartyAddress"></el-input>
+                            <el-input placeholder="请输入客户联系地址" :disabled="isEdit" v-model="formData.firstPartyAddress"></el-input>
                         </el-form-item>
                     </el-descriptions-item>
                     <el-descriptions-item label="合同开始日期" labelClassName="required">
                         <el-form-item prop="contractStartTime">
                             <el-date-picker align="right" type="datetime" :style="{ width: '100%' }"
                                 placeholder="请输入合同签订时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
-                                v-model="formData.contractStartTime">
+                                v-model="formData.contractStartTime" :disabled="isEdit">
                             </el-date-picker>
                         </el-form-item>
                     </el-descriptions-item>
@@ -79,21 +79,21 @@
                         <el-form-item prop="contractEndTime">
                             <el-date-picker align="right" type="datetime" :style="{ width: '100%' }"
                                 placeholder="请输入合同签订时间" v-model="formData.contractEndTime" format="yyyy-MM-dd HH:mm:ss"
-                                value-format="yyyy-MM-dd HH:mm:ss">
+                                value-format="yyyy-MM-dd HH:mm:ss" :disabled="isEdit">
                             </el-date-picker>
                         </el-form-item>
                     </el-descriptions-item>
 
                     <el-descriptions-item label="合同金额" labelClassName="required">
                         <el-form-item prop="contractMoney">
-                            <el-input placeholder="请输入合同金额" type="number" v-model="formData.contractMoney" step=“0.01”
+                            <el-input placeholder="请输入合同金额" :disabled="isEdit" type="number" v-model="formData.contractMoney" step=“0.01”
                                 :min="0">
                             </el-input>
                         </el-form-item>
                     </el-descriptions-item>
                     <el-descriptions-item label="是否含税" labelClassName="required">
                         <el-form-item prop="tax">
-                            <el-radio-group v-model="formData.tax">
+                            <el-radio-group v-model="formData.tax" :disabled="isEdit">
                                 <el-radio label="0">含税</el-radio>
                                 <el-radio label="1">不含税</el-radio>
                             </el-radio-group>
@@ -101,7 +101,7 @@
                     </el-descriptions-item>
                     <el-descriptions-item label="税点" labelClassName="required">
                         <el-form-item prop="taxPoint">
-                            <el-input placeholder="请输入税点" type="number" v-model="formData.taxPoint" min=“0.00” :min="0"
+                            <el-input placeholder="请输入税点" :disabled="isEdit" type="number" v-model="formData.taxPoint" min=“0.00” :min="0"
                                 step=“0.01”>
                             </el-input>
                         </el-form-item>
@@ -140,20 +140,20 @@
                 <el-descriptions :column="3" border class="contract-description-form">
                     <el-descriptions-item label="乙方签订人" labelClassName="required">
                         <el-form-item prop="partybName">
-                            <el-input placeholder="请输入乙方签订人" v-model="formData.partybName"></el-input>
+                            <el-input placeholder="请输入乙方签订人" :disabled="isEdit" v-model="formData.partybName"></el-input>
                         </el-form-item>
                     </el-descriptions-item>
                     <el-descriptions-item label="合同签订时间" labelClassName="required">
                         <el-form-item prop="signingTime">
                             <el-date-picker v-model="formData.signingTime" align="right" type="datetime"
-                                placeholder="请输入合同签订时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
+                                placeholder="请输入合同签订时间" :disabled="isEdit" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                             </el-date-picker>
                         </el-form-item>
                     </el-descriptions-item>
 
                     <el-descriptions-item label="合同制定人" labelClassName="required">
                         <el-form-item prop="preparedBy">
-                            <el-input placeholder="请输入合同制定人" v-model="formData.preparedBy"></el-input>
+                            <el-input placeholder="请输入合同制定人" :disabled="isEdit" v-model="formData.preparedBy"></el-input>
                         </el-form-item>
                     </el-descriptions-item>
                     <el-descriptions-item label="合同保管人" labelClassName="required">
@@ -172,13 +172,23 @@
                 </div>
                 <br />
                 <el-form-item>
-                    <el-button type="primary" @click="addContract">{{ !isEdit ? '立即创建' : '修改' }}</el-button>
+                    <el-button type="primary" @click="dialogVisible = true">{{ !isEdit ? '创建合同' : '修改合同' }}</el-button>
                     <el-button @click="$store.dispatch('tagsView/delView', $route);$router.back();">返回</el-button>
                     <!-- <el-button @click="closeDrawer">取消</el-button> -->
                 </el-form-item>
             </el-form>
         </div>
-        <!-- </el-drawer> -->
+        <el-dialog
+            :title="isEdit ? '确认修改' : '确认提交' "
+            :visible.sync="dialogVisible"
+            width="30%"
+            >
+            <span>确定{{isEdit ? '修改' : '添加'}}合同</span>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="addContract">确 定</el-button>
+            </span>
+            </el-dialog>
     </div>
 </template>
 <script>
@@ -223,7 +233,8 @@ export default {
             isEdit: false,
             addFormValidRules,
             action: '',
-            uploadChange: false
+            uploadChange: false,
+            dialogVisible: false
         }
     },
     computed: {
@@ -284,6 +295,11 @@ export default {
 
             this.$refs.form.validate((valid) => {
                 if (valid) {
+                    if(this.formData.contractStartTime > this.formData.contractEndTime){
+                        this.dialogVisible = false
+                        this.$message.warning('合同开始时间和结束时间不符合实际')
+                        return
+                    }
                     const params = {
                         companyId: this.companyId || this.$store.getters.companyId,
                         ...this.formData
@@ -303,7 +319,7 @@ export default {
                                     this.$router.push({ path: '/contractList' })
                                 }, 1000);
                             } else {
-                                this.$message.warning("添加合同失败")
+                                this.$message.warning("添加合同失败："+res.msg)
                             }
                         })
                     } else {
@@ -316,10 +332,12 @@ export default {
                                     this.$router.push({ path: '/contractList' })
                                 }, 1000);
                             } else {
-                                this.$message.warning("添加修改失败")
+                                this.$message.warning("添加修改失败："+res.msg)
                             }
                         })
                     }
+                }else{
+                    this.dialogVisible = false
                 }
             });
         },

src/views/contract/contractStaticData.js

@@ -25,11 +25,11 @@ export const addFormValidRules = {
             callback()
         }
     }, trigger: 'blur'}],
-    typeId: [{required: true, message: '合同类型不能为空', trigger: 'blur'}],
+    typeId: [{required: true, message: '合同类型不能为空', trigger: 'change'}],
     safekeeping: [{required: true, message: '合同保管人不能为空', trigger: 'blur'}],
     firstPartyAddress: [{required: true, message: '客户联系地址不能为空', trigger: 'blur'}],
     preparedBy: [{required: true, message: '合同制定人不能为空', trigger: 'blur'}],
-    contractParent: [{required: true, message: '母合同名称不能为空', trigger: 'blur'}],
+    contractParent: [{required: true, message: '母合同名称不能为空', trigger: 'change'}],
     firstPartyPhone: [
         { required: true, validator: checkPhone, trigger: ['change','blur'] },
     ],

src/views/contract/contractType.vue

@@ -4,37 +4,19 @@
       <el-form :inline="true" :model="contractTypeQuey">
         <!-- 合同名称，合同编号，合同类型，合同性质 -->
         <el-form-item>
-          <el-input
-            v-model="contractTypeQuey.name"
-            placeholder="根据类型名称查询"
-          />
+          <el-input v-model="contractTypeQuey.name" placeholder="根据类型名称查询" />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="qurey()"
-            >查询</el-button
-          >
-          <el-button
-            type="primary"
-            icon="el-icon-refresh-right"
-            @click="reset()"
-            >重置</el-button
-          >
-          <el-button
-            type="success"
-            icon="el-icon-circle-plus-outline"
-            @click="dialogFormVisible = true"
-          >
+          <el-button type="primary" icon="el-icon-search" @click="qurey()">查询</el-button>
+          <el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button>
+          <el-button type="success" icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true">
             添加类型
           </el-button>
         </el-form-item>
       </el-form>
     </div>
     <div class="container">
-      <el-table
-        :data="contractTypeList"
-        style="width: 100%; text-align: center"
-        border
-      >
+      <el-table :data="contractTypeList" style="width: 100%; text-align: center" border>
         <el-table-column label="序号" width="50px">
           <template slot-scope="scope">
             {{
@@ -47,24 +29,18 @@
         <el-table-column prop="name" label="类别名称" />
         <el-table-column prop="state" label="启用状态" width="100px">
           <template slot-scope="scope">
-            <el-switch
-              v-model="scope.row.state"
-              @change="
+            <el-switch v-model="scope.row.state" @change="
               updateState({
                 ...scope.row,
                 state: Math.abs(scope.row.state - 1),
               })
-              "
-              active-color="#13ce66"
-              inactive-color="#ff4949"
-            >
+            " active-color="#13ce66" inactive-color="#ff4949">
             </el-switch>
           </template>
         </el-table-column>
         <el-table-column label="操作" width="100px">
           <template slot-scope="scope">
-            <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)"
-              >编辑
+            <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)">编辑
             </el-button>
           </template>
         </el-table-column>
@@ -72,73 +48,37 @@
     </div>
 
     <div class="footer">
-      <el-pagination
-        @current-change="getContractTypeList"
-        :current-page.sync="contractTypeQuey.pageNum"
-        :page-size="contractTypeQuey.pageSize"
-        layout="total, prev, pager, next"
-        :total="total"
-      >
+      <el-pagination @current-change="getContractTypeList" :current-page.sync="contractTypeQuey.pageNum"
+        :page-size="contractTypeQuey.pageSize" layout="total, prev, pager, next" :total="total">
       </el-pagination>
     </div>
 
-    <el-dialog
-      :title="(isEdit ? '修改' : '添加') + '合同类型'"
-      :visible.sync="dialogFormVisible"
-      @closed="resetData"
-    >
+    <el-dialog :title="(isEdit ? '修改' : '添加') + '合同类型'" :visible.sync="dialogFormVisible" @closed="resetData">
       <el-form ref="form" :model="dynamicValidateForm" label-width="130px">
-        <el-form-item
-          label="合同类型名称"
-          prop="name"
-          :rules="[{ required: true, message: '请输入合同类型名称' }]"
-        >
-          <el-input
-            v-model="dynamicValidateForm.name"
-            autocomplete="off"
-          ></el-input>
+        <el-form-item label="合同类型名称" prop="name" :rules="[{ required: true, message: '请输入合同类型名称' }]">
+          <el-input v-model="dynamicValidateForm.name" autocomplete="off"></el-input>
         </el-form-item>
 
-        <el-form-item
-          v-show="!isEdit"
-          v-for="(name, index) in dynamicValidateForm.names"
-          :label="'合同类型名称' + (parseInt(index) + 1)"
-          :prop="'names.' + index + '.value'"
-          :key="index"
-          :rules="[
+        <el-form-item v-show="!isEdit" v-for="(name, index) in dynamicValidateForm.names"
+          :label="'合同类型名称' + (parseInt(index) + 1)" :prop="'names.' + index + '.value'" :key="index" :rules="[
             {
               required: true,
               message: '合同类型名称不能为空',
               trigger: 'blur',
             },
-          ]"
-        >
+          ]">
           <el-input v-model="name.value">
-            <el-button
-              slot="append"
-              icon="el-icon-delete"
-              @click.prevent="dynamicValidateForm.names.splice(index, 1)"
-              >删除
+            <el-button slot="append" icon="el-icon-delete" @click.prevent="dynamicValidateForm.names.splice(index, 1)">
+              删除
             </el-button>
           </el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button
-          v-if="!isEdit"
-          @click="dynamicValidateForm.names.push({ value: '' })"
-          >增加类型</el-button
-        >
+        <el-button v-if="!isEdit" @click="dynamicValidateForm.names.push({ value: '' })">增加类型</el-button>
         <el-button @click="resetData">取 消</el-button>
-        <el-button
-          v-if="isEdit"
-          type="primary"
-          @click="update(dynamicValidateForm)"
-          >确 定</el-button
-        >
-        <el-button v-else type="primary" @click="addContractType"
-          >确 定</el-button
-        >
+        <el-button v-if="isEdit" type="primary" @click="update(dynamicValidateForm)">确 定</el-button>
+        <el-button v-else type="primary" @click="addContractType">确 定</el-button>
       </div>
     </el-dialog>
   </div>
@@ -216,7 +156,7 @@ export default {
             this.$message.success("修改成功");
             this.dialogFormVisible && (this.dialogFormVisible = false);
             this.getContractTypeList();
-          }else{
+          } else {
             this.$message.error(res.msg);
           }
         });
@@ -233,6 +173,8 @@ export default {
           this.$message.success("修改成功");
           // this.dialogFormVisible && (this.dialogFormVisible = false)
           this.getContractTypeList();
+        } else {
+          this.$message.error(res.msg);
         }
       });
     },