新建重构工作流程框架

田浩浩
Showing 3 changed files with 260 additions and 40 deletions
src/api/zhcx.js
src/views/ywbl/fqsq/workFrame.vue
src/views/zhcx/djbcx/components/zdxx.vue
--- a/src/api/zhcx.js
View file @800ddc3
+++ b/src/api/zhcx.js
View file @800ddc3
@@ -39,6 +39,15 @@ export function getZdjbxx(qlbsm) {
  })
 }
+// 获取宗地信息
+export function getZdjjxxBySLdy(data) {
+  return request({
+    url: '/zhcx/djbcx/getZdjjxxBySLdy',
+    method: 'get',
+    params: data
+  })
+}
 // 获取不动产权利及其他事项页面信息
 export function getQlname(qlbsm) {
  return request({
@@ -65,7 +74,7 @@ export function getJsydsyqList(data) {
 }
 // 进度查询列表
-export function getJdcxBysearch (data) {
+export function getJdcxBysearch(data) {
  return request({
    url: '/zhcx/search/getJdcxBysearch',
    method: 'post',
--- a/src/views/ywbl/fqsq/workFrame.vue
View file @800ddc3
+++ b/src/views/ywbl/fqsq/workFrame.vue
View file @800ddc3
@@ -26,11 +26,38 @@
      </ul>
    </div>
    <!-- 内容框架 -->
-    <div>
+    <div id="ContainerFrame">
      <!-- 左侧菜单栏 -->
-      <div></div>
+      <div id="leftmenu">
+        <ul>
+          <p class="title">申请单元列表({{ unitData.length }})</p>
+          <div v-for="(item, index) in unitData" :key="index">
+            <li @click="unitClick(item)">
+              <p>{{ item.bdcdyh }}</p>
+              <p>{{ item.zl }}</p>
+            </li>
+            <!-- <div class="xian"></div> -->
+          </div>
+        </ul>
+      </div>
      <!-- 表单内容区域 -->
-      <div></div>
+      <div id="rightContainer">
+        <div class="tabDiv">
+          <el-tabs v-model="activeName" @tab-click="tabClick">
+            <el-tab-pane
+              :label="item.name"
+              :name="item.value"
+              v-for="(item, index) in tabList"
+              :key="index"
+            >
+            </el-tab-pane>
+          </el-tabs>
+          <component :is="componentTag" v-bind="currentSelectProps" />
+        </div>
+        <!-- <div style="width: 100%">
+        </div> -->
+      </div>
    </div>
  </div>
 </template>
@@ -38,6 +65,68 @@
 <style scoped lang='scss'>
 @import "~@/styles/mixin.scss";
+#ContainerFrame {
+  // margin-left: 5px;
+  // border: 1px solid #ebeef5;
+  // position: relative;
+  // box-sizing: border-box;
+  // width: 100%;
+  // height: 100%;
+  // display: inline;
+  height: 100%;
+  width: 100%;
+  position: sticky;
+  top: 80px;
+  //background-color: #ffffff;
+  border: 1px solid #ebeef5;
+  z-index: 100;
+  @include flex;
+}
+#leftmenu {
+  width: 250px;
+  border-right: 1px solid #ebeef5;
+  position: relative;
+  box-sizing: border-box;
+  ul {
+    position: relative;
+    .xian {
+      background: #f2f2f2;
+      padding: 2px;
+    }
+    .title {
+      padding: 5px;
+      text-align: center;
+    }
+    li {
+      padding: 5px;
+      font-size: 14px;
+      color: #606266;
+      line-height: 20px;
+    }
+    li:hover {
+      color: #0f93f6;
+      cursor: pointer;
+    }
+  }
+}
+#rightContainer {
+  .tabDiv {
+    width: 100%;
+    height: 100%;
+  }
+  // .fenpin {
+  //   min-width: 50%;
+  //   border-right: 1px solid #ebeef5;
+  // }
+  background-color: #ffffffe7;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  @include flex;
+}
 .svg-icon {
  width: 2.5em;
  height: 2.5em;
@@ -95,22 +184,34 @@
 <script>
 import { leftMenu, stepExpandInfo, record } from "@/api/fqsq.js";
 export default {
+  components: {
+    slxx: () => import("./components/slxx.vue"),
+    spyj: () => import("./components/spyj.vue"),
+    zdjbxx: () => import("../../zhcx/djbcx/components/zdxx.vue"),
+    qlxx: () => import("../../components/jsydsyq/jsydsyq.vue"),
+  },
  data() {
    return {
      bsmSlsq: "",
      bestepid: "",
      leftButtonList: [],
      rightButtonList: [],
+      unitData: [],
+      activeName: "",
+      tabList: [],
+      componentTag: "",
+      currentSelectProps: {},
    };
  },
  mounted() {
    this.bsmSlsq = this.$route.query.bsmSlsq;
    this.bestepid = this.$route.query.bestepid;
-    this.loadButton();
+    this.loadBdcdylist();
+    this.flowInitParam();
  },
  methods: {
-    //读取顶部按钮事件
+    //加载流程初始参数
-    loadButton() {
+    flowInitParam() {
      var formdata = new FormData();
      formdata.append("bsmSlsq", this.bsmSlsq);
      formdata.append("bestepid", this.bestepid);
@@ -118,9 +219,101 @@ export default {
        if (res.code === 200) {
          this.leftButtonList = res.result.button;
          this.rightButtonList = res.result.operation;
+          this.tabList = res.result.form;
+          //默认选择第一个选项卡内容
+          this.activeName = res.result.form[0].value;
+          //默认加载第一个选项卡的组件内容
+          this.componentTag = res.result.form[0].value;
        }
      });
    },
+    //流程环节操作按钮
+    operation(index, item) {
+      let that = this;
+      switch (item.value) {
+        case "zsyl":
+          this.zsylFlag = true;
+          break;
+        case "clfp":
+          this.key++;
+          this.issplitScreen = !this.issplitScreen;
+          this.flag = !this.flag;
+          if (this.issplitScreen) {
+            this.tabList.splice(1, 1);
+          } else {
+            this.tabList = [...this.tabList1];
+          }
+          break;
+        case "th":
+          this.thflag = true;
+          this.$nextTick(() => {
+            this.$refs.thdialogRef.tablelistFn();
+          });
+          break;
+        case "zc":
+          this.zcDialog = true;
+          this.$refs.zcDialogRef.tablelistFn();
+          break;
+        case "tc":
+          window.close();
+          break;
+        case "db":
+          var formdata = new FormData();
+          formdata.append("bsmSlsq", this.bsmSlsq);
+          formdata.append("bestepid", this.bestepid);
+          // comMsg;
+          this.$confirm("请确认是否登簿", "提示", {
+            iconClass: "el-icon-question", //自定义图标样式
+            confirmButtonText: "确认", //确认按钮文字更换
+            cancelButtonText: "取消", //取消按钮文字更换
+            showClose: true, //是否显示右上角关闭按钮
+            type: "warning", //提示类型  success/info/warning/error
+          }).then(function () {
+            record(formdata).then((res) => {
+              if (res.code === 200 || res.code === 2002) {
+                that.$alert(res.message);
+              }
+            });
+          });
+          break;
+      }
+    },
+    loadBdcdylist() {
+      var formdata = new FormData();
+      formdata.append("bsmSlsq", this.bsmSlsq);
+      formdata.append("bestepid", this.bestepid);
+      leftMenu(formdata).then((res) => {
+        if (res.code === 200) {
+          this.unitData = res.result;
+          this.currentSelectProps = res.result[0];
+          //debugger;
+          //this.$alert(res.result[0].bsmSldy);
+          // setTimeout(() => {
+          //   that.$refs.slxx?.[0].list(that.unitData?.[0]?.bsmSldy);
+          //   this.bsmBusiness = that.unitData?.[0]?.bsmBusiness;
+          // }, 300);
+        }
+      });
+    },
+    //  左侧列表点击调用接口
+    unitClick(item) {
+      // this.bsmBusiness = item.bsmBusiness
+      // var activeTabName = this.activeName
+      // if(activeTabName == 'slxx'){
+      //   //受理信息页面接口调取
+      //   this.$nextTick(() => {
+      //     this.$refs.slxx[0].list(item.bsmSldy)
+      //   })
+      // }else if(activeTabName == 'spyj'){
+      //   //审批页面接口调取
+      //   this.$nextTick(() => {
+      //     this.$refs.spyj[0].list(this.bsmBusiness,this.queryForm.bestepid)
+      //   })
+      // }
+    },
+    tabClick(tab, event) {
+      this.componentTag = tab.name;
+    },
  },
 };
 </script>
\ No newline at end of file
--- a/src/views/zhcx/djbcx/components/zdxx.vue
View file @800ddc3
+++ b/src/views/zhcx/djbcx/components/zdxx.vue
View file @800ddc3
@@ -24,84 +24,84 @@
        </tr>
        <tr>
          <td colspan="2">坐落</td>
-          <td colspan="4">{{ djzd.zl }}</td>
+          <td colspan="4">{{ zdjbxx.zdjxx.zl }}</td>
        </tr>
        <tr>
          <td rowspan="8" class="title2">土地状况</td>
        </tr>
        <tr>
          <td colspan="2">宗地面积</td>
-          <td>{{ djzd.zdmj }}</td>
+          <td>{{ zdjbxx.zdjxx.zdmj }}</td>
          <td>用途</td>
-          <td>{{ djzd.yt }}</td>
+          <td>{{ zdjbxx.zdjxx.ghytmc }}</td>
        </tr>
        <tr>
          <td colspan="2">等级</td>
-          <td>{{ djzd.dj }}</td>
+          <td>{{ zdjbxx.zdjxx.dj }}</td>
          <td>价格</td>
-          <td>{{ djzd.jg }}</td>
+          <td>{{ zdjbxx.zdjxx.jg }}</td>
        </tr>
        <tr>
          <td colspan="2">权利类型</td>
-          <td>{{ djzd.qllx }}</td>
+          <td>{{ zdjbxx.zdjxx.qllx }}</td>
          <td>权利性质</td>
-          <td>{{ djzd.qlxz }}</td>
+          <td>{{ zdjbxx.zdjxx.qlxz }}</td>
        </tr>
        <tr>
          <td colspan="2">权利设定方式</td>
-          <td>{{ djzd.qlsdfs }}</td>
+          <td>{{ zdjbxx.zdjxx.qlsdfs }}</td>
          <td>容积率</td>
-          <td>{{ djzd.rjl }}</td>
+          <td>{{ zdjbxx.zdjxx.rjl }}</td>
        </tr>
        <tr>
          <td colspan="2">建筑密度</td>
-          <td>{{ djzd.jzmd }}</td>
+          <td>{{ zdjbxx.zdjxx.jzmd }}</td>
          <td>建筑限高</td>
-          <td>{{ djzd.jzxg }}</td>
+          <td>{{ zdjbxx.zdjxx.jzxg }}</td>
        </tr>
        <tr>
          <td colspan="2">图幅号</td>
-          <td>{{ djzd.tfh }}</td>
+          <td>{{ zdjbxx.zdjxx.tfh }}</td>
          <td>地籍号</td>
-          <td>{{ djzd.djh }}</td>
+          <td>{{ zdjbxx.zdjxx.djh }}</td>
        </tr>
        <tr>
          <td colspan="2">档案号</td>
-          <td>{{ djzd.dah }}</td>
+          <td>{{ zdjbxx.zdjxx.dah }}</td>
          <td>地块代码</td>
-          <td>{{ djzd.dkdm }}</td>
+          <td>{{ zdjbxx.zdjxx.dkdm }}</td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-东</td>
-          <td colspan="4">{{ djzd.zdszd }}</td>
+          <td colspan="4">{{ zdjbxx.zdjxx.zdszd }}</td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-南</td>
-          <td colspan="4">{{ djzd.zdszn }}</td>
+          <td colspan="4">{{ zdjbxx.zdjxx.zdszn }}</td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-西</td>
-          <td colspan="4">{{ djzd.zdszx }}</td>
+          <td colspan="4">{{ zdjbxx.zdjxx.zdszx }}</td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-北</td>
-          <td colspan="4">{{ djzd.zdszb }}</td>
+          <td colspan="4">{{ zdjbxx.zdjxx.zdszb }}</td>
        </tr>
        <tr>
          <td class="title2" height="96">备注</td>
-          <td colspan="5">{{ djzd.bz }}</td>
+          <td colspan="5">{{ zdjbxx.zdjxx.bz }}</td>
        </tr>
        <tr>
          <td class="title2" height="96">附记</td>
-          <td colspan="5">{{ djzd.fj }}</td>
+          <td colspan="5">{{ zdjbxx.zdjxx.fj }}</td>
        </tr>
        <tr>
          <td colspan="2">状态</td>
-          <td colspan="2">{{ djzd.zt }}</td>
+          <td colspan="2">{{ zdjbxx.zdjxx.zt }}</td>
          <td>区县代码</td>
-          <td>{{ djzd.qxdm }}</td>
+          <td>{{ zdjbxx.zdjxx.qxdm }}</td>
        </tr>
-        <tr>
+        <tr v-show="showGroup">
          <td class="title2">变化情况</td>
          <td colspan="5" class="bhqk">
            <div class="box">
@@ -123,6 +123,7 @@
 <script>
 import { mapGetters } from "vuex";
+import { getZdjjxxBySLdy } from "@/api/zhcx.js";
 export default {
  name: "zdxx",
@@ -165,19 +166,36 @@ export default {
      bhqkTableWidth: 745,
      djzd: {},
      zdbhqks: [],
+      propsParam: {},
+      zdjbxx: {},
+      showGroup: false,
    };
  },
-  computed: {
+  // computed: {
-    ...mapGetters(["djbxx"]),
+  //   ...mapGetters(["djbxx"]),
-  },
+  // },
  mounted() {
-    this.info = this.djbxx.zdjbxx;
+    this.propsParam = this.$attrs;
-    this.djzd = this.djbxx.zdjbxx.djzd;
+    this.loadData();
-    this.zdbhqks = this.djbxx.zdjbxx.zdbhqks;
+    //this.$alert(this.param.bdcdyh);
+    // this.info = this.djbxx.zdjbxx;
+    // this.djzd = this.djbxx.zdjbxx.djzd;
+    // this.zdbhqks = this.djbxx.zdjbxx.zdbhqks;
+    // let widths = (this.zdbhqks.length + 1) * 180 + 110;
-    let widths = (this.zdbhqks.length + 1) * 180 + 110;
+    // this.bhqkTableWidth = widths > 745 ? widths : 745;
-    this.bhqkTableWidth = widths > 745 ? widths : 745;
+  },
+  methods: {
+    loadData() {
+      getZdjjxxBySLdy({ bsmsldy: this.propsParam.bsmSldy }).then((res) => {
+        if (res.code === 200) {
+          this.zdjbxx = res.result;
+          if (res.result.length > 0) {
+            this.showGroup = true;
+          }
+        }
+      });
+    },
  },
 };
 </script>