mode

src/components/FecrDialog.vue

@@ -5,6 +5,7 @@
     :visible.sync="visible"
     :width="width||'30%'"
     :before-close="handleClose"
+    :close-on-click-modal="modalClose"
   >
     <div slot="title" v-if="!title">
       <slot name="dialog-title"/>
@@ -23,6 +24,10 @@ export default {
     width:[String],
     title: [String],
     visible: [Boolean],
+    modalClose:{
+      type:Boolean,
+      default:true
+    }
   },
   data() {
     return {};

src/view/home/main/companyDetails/guarantee.vue

@@ -14,7 +14,7 @@
     >
     <fecr-table
       :data="data"
-      :columns="getColumn(data, true)"
+      :columns="columns"
       v-if="data.length !== 0"
       @cellClick="cellClick"
     >
@@ -55,19 +55,43 @@
       :visible.sync="editVisible"
       @cancelVisible="editVisible = false"
       @submit="editSubmit"
+      :width="'60%'"
+      :modalClose="false"
     >
       <template v-slot:dialog-title>
         <span>编辑担保</span>
       </template>
       <template v-slot:body>
-        <el-form v-model="form">
-          <el-form-item
-            v-for="(item, index) in form"
-            :key="index"
-            :label="index"
+        <el-form :model="form" :rules="rules" ref="ruleForm">
+          <div
+            style="
+              display: flex;
+              justify-content: space-between;
+              flex-wrap: wrap;
+            "
           >
-            <el-input v-model="form[index]"></el-input>
-          </el-form-item>
+            <el-form-item
+              v-for="(item, index) in form"
+              :key="index"
+              :label="index"
+              style="width: 45%"
+              :prop="index"
+            >
+              <el-input
+                v-if="!index.includes('日期')"
+                v-model="form[index]"
+                :type="index.includes('万元') ? 'number' : 'text'"
+              ></el-input>
+              <el-date-picker
+                v-else
+                type="date"
+                style="width: 100%"
+                v-model="form[index]"
+                value-format="yyyy-MM-dd"
+                placeholder="选择日期"
+              />
+            </el-form-item>
+          </div>
         </el-form>
       </template>
     </fecr-dialog>
@@ -76,18 +100,31 @@
       :visible.sync="compensatoryVisible"
       @cancelVisible="compensatoryVisible = false"
       @submit="compensatorySubmit"
+      :modalClose="false"
     >
       <template v-slot:dialog-title>
         <span>编辑代偿</span>
       </template>
       <template v-slot:body>
-        <el-form :model="editCompensatoryFrom">
+        <el-form :model="editCompensatoryFrom" :rules="compensatoryRules" ref="compensatory">
           <el-form-item
             v-for="(item, index) in editCompensatoryFrom"
             :key="index"
             :label="index"
+            :prop="index"
           >
-            <el-input v-model="editCompensatoryFrom[index]"></el-input>
+            <el-input
+              v-if="!index.includes('日期')"
+              v-model="editCompensatoryFrom[index]"
+              :type="index.includes('万元') ? 'number' : 'text'"
+            ></el-input>
+            <el-date-picker
+              v-else
+              v-model="editCompensatoryFrom[index]"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+            />
           </el-form-item>
         </el-form>
       </template>
@@ -104,6 +141,68 @@ export default {
   data() {
     return {
       data: [],
+      columns: [
+        {
+          label: "担保ID",
+          prop: "担保ID",
+        },
+        {
+          label: "项目名称",
+          prop: "项目名称",
+        },
+        {
+          label: "被担保人",
+          prop: "被担保人",
+        },
+        {
+          label: "担保类型",
+          prop: "担保类型",
+        },
+        {
+          label: "担保方式",
+          prop: "担保方式",
+        },
+        {
+          label: "担保余额(万元)",
+          prop: "担保余额(万元)",
+        },
+        {
+          label: "解除金额(万元)",
+          prop: "解除金额(万元)",
+        },
+        {
+          label: "责任担保余额(万元)",
+          prop: "责任担保余额(万元)",
+        },
+        {
+          label: "担保开始日期",
+          prop: "担保开始日期",
+        },
+        {
+          label: "担保结束日期",
+          prop: "担保结束日期",
+        },
+        {
+          label: "省份",
+          prop: "省份",
+        },
+        {
+          label: "地级市",
+          prop: "地级市",
+        },
+        {
+          label: "行业",
+          prop: "行业",
+        },
+        {
+          label: "备注",
+          prop: "备注",
+        },
+        {
+          label: "代偿情况",
+          prop: "代偿情况",
+        },
+      ],
       visible: false,
       editVisible: false,
       compensatory: [],
@@ -120,7 +219,7 @@ export default {
         项目名称: "",
         省份: "",
         地级市: "",
-        行业:"",
+        行业: "",
         "担保余额(万元)": "",
         "解除金额(万元)": "",
         "责任担保余额(万元)": "",
@@ -138,6 +237,38 @@ export default {
       editCompensatoryFrom: {},
       compensatoryStatus: "new",
       gid: "",
+      rules: {
+        项目名称: [{ required: true, message: "请填写", trigger: "blur" }],
+        被担保人: [{ required: true, message: "请填写", trigger: "blur" }],
+        担保类型: [{ required: true, message: "请填写", trigger: "blur" }],
+        担保方式: [{ required: true, message: "请填写", trigger: "blur" }],
+        "担保余额(万元)": [
+          { required: true, message: "请填写", trigger: "blur" },
+        ],
+        "解除金额(万元)": [
+          { required: true, message: "请填写", trigger: "blur" },
+        ],
+        "责任担保余额(万元)": [
+          { required: true, message: "请填写", trigger: "blur" },
+        ],
+        担保开始日期: [{ required: true, message: "请填写", trigger: "blur" }],
+        担保结束日期: [{ required: true, message: "请填写", trigger: "blur" }],
+        省份: [{ required: true, message: "请填写", trigger: "blur" }],
+        地级市: [{ required: true, message: "请填写", trigger: "blur" }],
+        行业: [{ required: true, message: "请填写", trigger: "blur" }],
+      },
+      compensatoryRules: {
+        担保ID: [{ required: true, message: "请填写", trigger: "blur" }],
+        项目名称: [{ required: true, message: "请填写", trigger: "blur" }],
+        "代偿金额(万元)": [
+          { required: true, message: "请填写", trigger: "blur" },
+        ],
+        "代偿回收金额(万元)": [
+          { required: true, message: "请填写", trigger: "blur" },
+        ],
+
+        代偿日期: [{ required: true, message: "请填写", trigger: "blur" }],
+      },
     };
   },
 
@@ -182,17 +313,29 @@ export default {
     },
 
     editSubmit(params) {
-      JsonPost(
-        `/admin/company/guarantee_info?${this.formStatus}`,
-        Object.assign(this.form, {
-          "担保余额(万元)": this.form["担保余额(万元)"]?Number(this.form["担保余额(万元)"]):0,
-          "解除金额(万元)": this.form["解除金额(万元)"]?Number(this.form["解除金额(万元)"]):0,
-          "责任担保余额(万元)": this.form["责任担保余额(万元)"]?Number(this.form["责任担保余额(万元)"]):0,
-        })
-      ).then((res) => {
-        this.$message.success(res.result);
-        this.editVisible = params;
-        this.init();
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          JsonPost(
+            `/admin/company/guarantee_info?${this.formStatus}`,
+            Object.assign(this.form, {
+              "担保余额(万元)": this.form["担保余额(万元)"]
+                ? Number(this.form["担保余额(万元)"])
+                : 0,
+              "解除金额(万元)": this.form["解除金额(万元)"]
+                ? Number(this.form["解除金额(万元)"])
+                : 0,
+              "责任担保余额(万元)": this.form["责任担保余额(万元)"]
+                ? Number(this.form["责任担保余额(万元)"])
+                : 0,
+            })
+          ).then((res) => {
+            this.$message.success(res.result);
+            this.editVisible = params;
+            this.init();
+          });
+        } else {
+          return false;
+        }
       });
     },
 
@@ -218,18 +361,26 @@ export default {
     },
 
     compensatorySubmit() {
-      JsonPost(
-        `/admin/company/repay?${this.compensatoryStatus}`,
-        Object.assign(this.editCompensatoryFrom, {
-          "代偿金额(万元)": Number(this.editCompensatoryFrom["代偿金额(万元)"]),
-          "代偿回收金额(万元)": Number(
-            this.editCompensatoryFrom["代偿回收金额(万元)"]
-          ),
-        })
-      ).then((res) => {
-        this.$message.success(res.result);
-        this.compensatoryVisible = false;
-        this.compensatoryInit(this.gid);
+      this.$refs["compensatory"].validate((valid) => {
+        if (valid) {
+          JsonPost(
+            `/admin/company/repay?${this.compensatoryStatus}`,
+            Object.assign(this.editCompensatoryFrom, {
+              "代偿金额(万元)": Number(
+                this.editCompensatoryFrom["代偿金额(万元)"]
+              ),
+              "代偿回收金额(万元)": Number(
+                this.editCompensatoryFrom["代偿回收金额(万元)"]
+              ),
+            })
+          ).then((res) => {
+            this.$message.success(res.result);
+            this.compensatoryVisible = false;
+            this.compensatoryInit(this.gid);
+          });
+        } else {
+          return false;
+        }
       });
     },
   },