补录信息表单

+<!--
+ * @Description:
+ * @Autor: renchao
+ * @LastEditTime: 2023-05-25 08:59:02
+-->
 <template>
-  <div class="from-clues-header">
-    <div>收件信息</div>
-    <el-form :model="form"  label-width="120px">
-      <div class="slxx_con">
+  <!-- 受理信息 -->
+  <div class="slxx">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      class="loadingtext"
+      ref="ruleForm"
+      :label-position="flag ? 'top' : ''"
+      :inline="flag"
+      label-width="120px"
+    >
+      <div class="slxx_con" v-if="isShow" :class="flag ? 'formMarginBot0' : ''">
         <div class="slxx_title title-block">
-          受理信息
+          补录信息
           <div class="triangle"></div>
         </div>
-        <el-row :gutter="10" v-if="form.slsq">
+        <el-row :gutter="10">
           <el-col :span="8">
-            <el-form-item label="补录编号：">
-              <el-input disabled v-model="form.Repair.ywh"></el-input>
+            <el-form-item label="业务号：">
+              <el-input disabled v-model="ruleForm.qlxx.ywh"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="补录人员：">
-              <el-input disabled v-model="form.Repair.slry"></el-input>
+              <el-input disabled v-model="ruleForm.qlxx.dbr"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="补录时间：">
-              <el-input disabled v-model="form.Repair.slsj"></el-input>
+              <el-input disabled v-model="ruleForm.qlxx.qlrmc"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="10">
           <el-col :span="8">
             <el-form-item label="权利类型：">
-              <el-input disabled v-model="form.Repair.qllxmc"></el-input>
+              <el-input disabled v-model="ruleForm.qlxx.qlxx"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="登记类型：">
-              <el-input disabled v-model="form.Repair.djlxmc"></el-input>
+              <el-input disabled v-model="ruleForm.qlxx.djlxmc"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="登记情形：">
+              <el-input disabled v-model="ruleForm.qlxx.djlxmc"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="slxx_title title-block">
+          不动产单元情况
+          <div class="triangle"></div>
+        </div>
+        <el-row :gutter="10">
+          <el-col :span="8">
+            <el-form-item label="不动产单元号：">
+              <el-input disabled v-model="ruleForm.qlxx.bdcdyh"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="权利性质：">
+              <el-input disabled v-model="ruleForm.qlxx.qlxzmc"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="8">
+            <el-form-item label="宗地面积：">
+              <el-input disabled v-model="ruleForm.qlxx.mjmc"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="土地用途：">
+              <el-input disabled v-model="ruleForm.fdcq2.ghyt"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="坐落：">
+              <el-input disabled v-model="ruleForm.qlxx.zl"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="房屋结构：">
+              <el-input disabled v-model="ruleForm.fdcq2.fwjgmc"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <div class="slxx_title title-block">
+          权利人信息
+          <div class="triangle"></div>
+        </div>
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="共有方式：">
+              <el-radio-group
+                :disabled="$route.query.viewtype == 0"
+                v-model="ruleForm.qlxx.gyqk"
+              >
+                <el-radio label="0">单独所有</el-radio>
+                <el-radio label="1">共同共有</el-radio>
+                <el-radio label="2">按份所有</el-radio>
+                <el-radio label="3">其它共有</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="6" v-show="ruleForm.qlxx.gyfs == '1'">
+            <el-form-item label="是否分别持证：">
+              <el-radio-group v-model="ruleForm.qlxx.sqfbcz">
+                <el-radio :label=1>是</el-radio>
+                <el-radio :label=0>否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col> -->
+          <!-- <el-col :span="6" v-show="ruleForm.qlxx.sqfbcz == '0'&&ruleForm.qlxx.gyfs == '1'">
+            <el-form-item label="持证人：">
+              <el-select v-model="ruleForm.czr" placeholder="持证人">
+                <el-option v-for="item in czrOptions" :key="item.zjh" :label="item.sqrmc" :value="item.zjh">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col> -->
+        </el-row>
+        <qlrCommonTable
+          :tableData="ruleForm.qlrList"
+          @upDateQlrxxList="upDateQlrxxList"
+          :key="key"
+          :viewtype="$route.query.viewtype"
+          :gyfs="ruleForm.qlxx.gyfs"
+        />
+
+        <div v-if="ruleForm.ywrList && ruleForm.ywrList.length > 0">
+          <div class="slxx_title title-block">
+            义务人信息
+            <div class="triangle"></div>
+          </div>
+          <qlrCommonTable
+            v-if="ruleForm.ywrList"
+            :tableData="ruleForm.ywrList"
+            :key="key"
+            @upDateQlrxxList="upDateYwrxxList"
+            :viewtype="$route.query.viewtype"
+          />
+        </div>
+
+        <div class="slxx_title title-block">
+          登记原因
+          <div class="triangle"></div>
+        </div>
+        <el-row :gutter="10">
+          <el-col>
+            <el-form-item label="登记原因：" prop="djyy">
+              <el-input
+                class="textArea"
+                type="textarea"
+                :disabled="$route.query.viewtype"
+                v-model="ruleForm.fdcq2.djyy"
+              >
+              </el-input>
             </el-form-item>
           </el-col>
         </el-row>
       </div>
+      <el-row class="btn" v-if="!$route.query.viewtype && ableOperation">
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">保存</el-button>
+        </el-form-item>
+      </el-row>
     </el-form>
-    <div class="btn">
-      <el-button type="primary" @click="slxxsubmitForm">保存</el-button>
-      <el-button @click="closeDialog">取消</el-button>
-    </div>
   </div>
 </template>
 <script>
 import { mapGetters } from "vuex";
- import { init } from "@/api/djbbl.js"
+import { Init, saveData } from "@/api/workflow/jsydsyqFlow.js";
+import { init } from "@/api/djbbl.js";
+import qlrCommonTable from "@/views/workflow/components/qlrCommonTable";
 export default {
-  props: {
-    currentSelectProps: {
-      type: Object,
-      default: () => {},
-    },
+  components: { qlrCommonTable },
+  computed: {
+    ...mapGetters(["dictData", "flag"]),
   },
-
   data() {
     return {
-      //传递参数
+      //表单是否可操作
       propsParam: this.$attrs,
-      activeName: "slxx",
-      form: {},
-      datalist: [],
-      qsztList: [
-        {
-          value: "1",
-          label: "现势",
-        },
-        {
-          value: "2",
-          label: "历史",
-        },
-      ],
-      label: "",
-      isshow: true,
+      ableOperation: true,
+      key: 0,
+      isShow: false,
+      disabled: true,
+      czrOptions: [],
+      ruleForm: {},
+      //传递参数\
+      rules: {},
     };
   },
-  computed: {
-    ...mapGetters(["dictData"]),
-  },
   created() {
     this.loadData();
-    // this.clmlInitList(1)
-  },
-  mounted() {
-    // if (this.formData.data) {
-    //   this.$nextTick(() => {
-    //     this.form = Object.assign({}, this.formData.data);
-    //     // this.datalist = Object.assign([], this.formData.datalist)
-    //     this.form.qszt =
-    //       this.form.qszt == "0"
-    //         ? "临时"
-    //         : this.form.qszt == "1"
-    //         ? "现势"
-    //         : "历史";
-    //   });
-    // }
-    // this.datalist = this.formData.datalist
-    // this.datalist = JSON.parse(JSON.stringify(this.formData.datalist));
-    // this.datalist.shift();
-    // this.datalist.shift();
-    // console.log("this.datalist", this.datalist);
   },
-
+  mounted() {},
   methods: {
     loadData() {
       init(this.propsParam.bsmRepair).then((res) => {
         if (res.code == 200) {
-          this.form=res.result;
-          console.log("/rest/djbRepair/init",res);
+          this.ruleForm = res.result;
+          this.isShow = true;
           // this.tableData = res.result;
           // if (this.tableData.length < datas.columns().emptycolNum) {
           //   this.emptycolNum =
@@ -118,266 +218,77 @@ export default {
           // }
         }
       });
-
     },
-    //  受理信息保存
-    slxxsubmitForm() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          // addUserCommonOpinion({ commonOpinion: this.form.commonOpinion }).then(res => {
-          //   if (res.code == 200) {
-          //     this.$message.success("新增成功")
-          //     this.closeaddDiglog();
-          //     this.getList()
-          //   } else {
-          //     this.$message.error(res.message)
-          //   }
-          // })
-        } else {
+    // 更新权利人信息
+    upDateQlrxxList(val) {
+      this.ruleForm.qlrList && (this.ruleForm.qlrList = _.cloneDeep(val));
+      this.czrOptions = this.ruleForm.qlrList;
+      this.key++;
+    },
+    // 更新义务人信息
+    upDateYwrxxList(val) {
+      this.ruleForm.ywrList && (this.ruleForm.ywrList = _.cloneDeep(val));
+      this.key++;
+    },
+    onSubmit() {
+      if (this.ruleForm.qlrList.length == 0) {
+        this.$message({
+          showClose: true,
+          message: "请确认权利人信息",
+          type: "error",
+        });
+        return false;
+      }
+
+      if (this.ruleForm.qlxx.gyfs == "0") {
+        if (this.ruleForm.qlrList.length > 1) {
+          this.$message({
+            showClose: true,
+            message: "共有方式：单独所有，权利人只能是一个人",
+            type: "error",
+          });
           return false;
         }
+        this.ruleForm.qlrList[0].sfczr = "1";
+      }
+      if (this.ruleForm.qlxx.gyfs == "1") {
+        //是否分别持证
+        if (this.ruleForm.qlxx.sqfbcz == "1") {
+          //是
+          this.ruleForm.qlrList.forEach((item, index) => {
+            item.sfczr = "1";
+          });
+        } else {
+          this.ruleForm.qlrList.forEach((item, index) => {
+            if (item.zjh == this.ruleForm.czr) {
+              item.sfczr = "1";
+            } else {
+              item.sfczr = "0";
+            }
+          });
+        }
+      }
+      saveData(this.ruleForm).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            showClose: true,
+            message: "保存成功！",
+            type: "success",
+          });
+          this.$store.dispatch("user/refreshPage", true);
+        } else {
+          this.$message({
+            showClose: true,
+            message: res.message,
+            type: "error",
+          });
+        }
       });
-      this.isshow = false;
     },
-    closeDialog() {},
   },
 };
 </script>
 <style scoped lang="scss">
-@import "~@/styles/mixin.scss";
 @import "~@/styles/public.scss";
-
-.from-clues-header {
-  @include flex;
-  flex-direction: column;
-  overflow-y: hidden;
-  height: 620px;
-  padding: 0 2px;
-
-  .btn {
-    margin-top: 40px;
-    margin-bottom: 20px;
-    text-align: center;
-  }
-}
-
-// 审批意见样式
-
-.spyj {
-  .box {
-    overflow-x: auto;
-    width: 100%;
-    height: 95%;
-    background: #fff;
-    text-align: center;
-    padding: 4px;
-    overflow-y: scroll;
-    padding-top: 20px;
-    padding: 20px 40px;
-    /deep/.el-input__inner {
-      width: 200px;
-      border: none;
-    }
-  }
-  .spyj_title {
-    line-height: 68px;
-    border: 1px solid $borderColor;
-    text-align: center;
-    font-size: 22px;
-    font-weight: 400;
-    background-color: #eceef2;
-    display: block;
-    border-bottom: none;
-  }
-
-  /deep/.el-form-item {
-    margin-bottom: 0;
-  }
-
-  .bottom10 {
-    margin-bottom: 15px;
-  }
-
-  .spyj_form {
-    display: flex;
-    border: 1px solid $borderColor;
-
-    .item_left {
-      width: 150px;
-      background-color: #f8f8fa;
-      color: #606266;
-      display: flex;
-      font-size: 14px;
-      text-indent: 80px;
-      align-items: center;
-      border-right: 1px solid $borderColor;
-    }
-
-    .item_right {
-      flex: 1;
-      width: 100%;
-
-      /deep/.el-form-item__label {
-        background-color: #f8f8fa;
-      }
-      /deep/.el-form-item__content {
-        display: block;
-        text-align: left;
-        text-indent: 10px;
-      }
-      .opinion_item {
-        /deep/.el-form-item__error {
-          margin-top: -16px !important;
-          left: 3px;
-        }
-
-        border-bottom: 1px solid $borderColor;
-      }
-
-      .opinion {
-        position: relative;
-        font-size: 14px;
-
-        /deep/.el-textarea__inner {
-          border: none;
-        }
-      }
-
-      .opinion_btn {
-        position: absolute;
-        right: 15px;
-        bottom: 10px;
-      }
-    }
-  }
-
-  .submit_button {
-    text-align: center;
-    margin: 15px 0;
-  }
-}
-
-// 材料信息样式
-.active {
-  background: $light-blue !important;
-  color: #fff;
-}
-
-.required {
-  font-size: 12px;
-  color: $pink;
-  float: left;
-}
-
-.cl_number {
-  float: right;
-}
-
-.clxx {
-  width: 100%;
-  display: flex;
-  padding-left: 5px;
-  height: calc(100vh - 125px);
-
-  .left {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    .item {
-      width: 28px;
-      height: 49%;
-      @include flex-center;
-      background-color: #e4e7ed;
-      border-bottom-right-radius: 10px;
-      padding: 5px;
-      cursor: pointer;
-      transition: all 0.3s;
-
-      &:hover {
-        @extend .active;
-      }
-    }
-  }
-
-  .right {
-    width: 100%;
-    height: 100%;
-
-    .clmlmx-box {
-      margin: 0 auto;
-
-      .title {
-        text-align: center;
-        height: 60px;
-        line-height: 60px;
-        border: 1px solid #dfe6ec;
-        font-size: 20px;
-        background: #81d3f81a;
-        margin-bottom: -1px;
-      }
-    }
-
-    .clyl-box {
-      width: 100%;
-      height: 100%;
-      display: flex;
-
-      .menu-tree {
-        width: 20%;
-        min-width: 160px;
-        height: 100%;
-        margin-right: 10px;
-        border-right: 1px dotted #d9d9d9;
-        padding: 0 15px;
-
-        .item {
-          line-height: 30px;
-          padding-top: 5px;
-          border-bottom: 1px solid #e8e8e8;
-          font-size: 16px;
-          text-align: center;
-          color: $light-blue;
-
-          .itemIcon {
-            float: right;
-            line-height: 60px;
-            cursor: pointer;
-          }
-
-          .child {
-            line-height: 32px;
-            border-bottom: 1px solid #e8e8e8;
-            padding-left: 10px;
-            color: #6b6b6b;
-            cursor: pointer;
-            box-sizing: border-box;
-            border-radius: 6px;
-            line-height: 20px;
-            transition: all 0.3s;
-            padding: 8px 0;
-          }
-
-          .child:hover {
-            color: $light-blue;
-            transform: scale(1.1);
-          }
-
-          .checked {
-            border: 1px solid $light-blue;
-            color: $light-blue;
-          }
-        }
-      }
-
-      .clyl-img {
-        width: 75%;
-        height: 100%;
-        background: #f3f4f7;
-        margin: 0 auto;
-        position: relative;
-      }
-    }
-  }
-}
+@import "~@/styles/slxx/slxx.scss";
 </style>

@@ -209,6 +209,12 @@ export default {
     },
     //切换选项卡内容组件
     getFromRouter (tabname) {
+         for (let item of this.tabList) {
+        if (item.value === tabname) {
+          this.currentSelectTab = item
+          break;
+        }
+      }
       this.componentTag = getForm(tabname, this.$route.query.sqywbm);
     }
   },