style:证书领取界面的开发

任超
Showing 3 changed files with 121 additions and 114 deletions
src/components/tanchuang/index.vue
src/views/workflow/components/zslq.vue
src/views/workflow/workFrame.vue
--- a/src/components/tanchuang/index.vue
View file @933d34a
+++ b/src/components/tanchuang/index.vue
View file @933d34a
@@ -59,13 +59,13 @@ export default {
      if (this.btnShow) { //判断按钮的显影来决定是否需要计算高度
        if (this.height == 'auto') {
          this.contentHeight = (this.$refs.contentRef.offsetHeight - 100) + 'px'
-        }else{
+        } else {
          this.contentHeight = this.height
        }
      } else {
-        if(this.height=='auto'){
+        if (this.height == 'auto') {
          this.contentHeight = this.$refs.contentRef.offsetHeight
-        }else{
+        } else {
          this.contentHeight = this.height
        }
      }
@@ -131,7 +131,10 @@ export default {
 .ls-title {
  padding: 16px;
  color: #ffffff;
-  background: linear-gradient(3deg, #409EFF, transparent);
+  background: linear-gradient(3deg, #409EFF, #a7cbee);
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  overflow: hidden;
 }
 .ls-title .svg-icon {
@@ -145,15 +148,15 @@ export default {
 }
 .ls-mask-footer {
-    height: 50px;
+  height: 50px;
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    width: 100%;
+  width: 100%;
-    box-shadow: 0px 0px 2px 0px;
+  box-shadow: 0px 0px 1px 0px;
-    border-radius: 0 0 10px 10px;
+  border-radius: 0 0 5px 5px;
-    position: absolute;
+  position: absolute;
-    bottom: 0;
+  bottom: 0;
-    background: #ffffff;
+  background: #ffffff;
 }
--- a/src/views/workflow/components/zslq.vue
View file @933d34a
+++ b/src/views/workflow/components/zslq.vue
View file @933d34a
 <template>
-  <dialogBox title="证书领取" @submitForm="submitForm" saveButton="保存" width="60%" height='30%' @closeDialog="closeDialog"
+  <div class="zslq">
-    v-model="value">
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
-    <div class="from-clues-content">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="发证人姓名">
+            <el-input v-model="ruleForm.fzrxm" disabled></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="发证时间">
+            <el-input v-model="ruleForm.fzrxm" disabled></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="发证数量">
+            <el-input v-model="ruleForm.fzsl" disabled></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
      <lb-table border :column="tableData.columns" :data="tableData.data" :pagination="false" :heightNum="600">
      </lb-table>
-    </div>
+      <el-row>
-    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" style="display:flex;">
+        <el-col :span="6">
-      <el-form-item label="领证人" prop="lzrxm">
+          <el-form-item label="领证人" prop="lzrxm">
-        <el-input v-model="ruleForm.lzrxm"></el-input>
+            <el-input v-model="ruleForm.lzrxm"></el-input>
-      </el-form-item>
+          </el-form-item>
-      <el-form-item label="证件类型" prop="lzrzjlb">
+        </el-col>
-        <el-select v-model="ruleForm.lzrzjlb" filterable clearable placeholder="请选择">
+        <el-col :span="6">
-          <el-option v-for="item in dictData['A30']" :key="item.dcode" :label="item.dname" :value="item.dcode">
+          <el-form-item label="证件类型" prop="lzrzjlb">
-          </el-option>
+            <el-select v-model="ruleForm.lzrzjlb" filterable clearable placeholder="请选择">
-        </el-select>
+              <el-option v-for="item in zslqList" :key="item.dcode" :label="item.dname" :value="item.dcode">
-      </el-form-item>
+              </el-option>
-      <el-form-item label="证件号" prop="lzrzjh">
+            </el-select>
-        <el-input v-model="ruleForm.lzrzjh"></el-input>
+          </el-form-item>
-      </el-form-item>
+        </el-col>
-      <el-form-item label="领证人电话" prop="lzrdh">
+        <el-col :span="6">
-        <el-input v-model="ruleForm.lzrdh"></el-input>
+          <el-form-item label="证件号" prop="lzrzjh">
-      </el-form-item>
+            <el-input v-model="ruleForm.lzrzjh"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="领证人电话" prop="lzrdh">
+            <el-input v-model="ruleForm.lzrdh"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row style="text-align:center">
+        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
+        <el-button @click="resetForm('ruleForm')">取消</el-button>
+      </el-row>
    </el-form>
-  </dialogBox>
+  </div>
 </template>
 <script>
+import store from '@/store/index.js'
 import table from "@/utils/mixin/table";
 import { getCertificateList, issueCertificate } from "@/api/fqsq.js";
 import { datas } from "../javascript/fzxxdata";
-import { mapGetters } from 'vuex'
 export default {
  mixins: [table],
-  components: {
-    ...mapGetters(['dictData']),
-  },
-  props: {
-    value: { type: Boolean, default: false },
-  },
  data () {
    return {
+      zslqList: [],
      ruleForm: {
+        fzrxm: '',
+        fzsj: '',
+        fzsl: '',
        bsmBdcqz: [],
        lzrxm: '',
        lzrzjlb: '',
@@ -68,7 +95,9 @@ export default {
      },
    }
  },
+  created () {
+    this.zslqList = store.getters.dictData['A30']
+  },
  methods: {
    fetchData () { },
    //列表初始化
--- a/src/views/workflow/workFrame.vue
View file @933d34a
+++ b/src/views/workflow/workFrame.vue
View file @933d34a
@@ -11,11 +11,7 @@
      </ul>
      <!-- 右侧流程按钮 -->
      <ul>
-        <li
+        <li @click="operation(index, item)" v-for="(item, index) in rightButtonList" :key="index">
-          @click="operation(index, item)"
-          v-for="(item, index) in rightButtonList"
-          :key="index"
-        >
          <svg-icon class="icon" :icon-class="item.icon" />
          <span class="iconName">{{ item.name }}</span>
        </li>
@@ -28,50 +24,28 @@
        <div v-if="this.isShowdrawer">
          <div class="title">
            申请单元列表({{ unitData.length }})
-            <el-button
+            <el-button type="text" class="batchDel" @click="handleBatchDel" v-if="unitData.length > 1">批量删除</el-button>
-              type="text"
-              class="batchDel"
-              @click="handleBatchDel"
-              v-if="unitData.length > 1"
-              >批量删除</el-button
-            >
          </div>
          <el-menu :default-active="activeIndex" @select="unitClick">
-            <el-menu-item
+            <el-menu-item v-for="(item, index) in unitData" :index="index.toString()" :key="index">
-              v-for="(item, index) in unitData"
-              :index="index.toString()"
-              :key="index"
-            >
              <div>
                <p>{{ item.bdcdyh }}</p>
                <p class="title-detail">{{ item.zl }}</p>
              </div>
-              <i
+              <i class="el-icon-delete" v-if="unitData.length > 1" @click.stop="handleDel(item)"></i>
-                class="el-icon-delete"
-                v-if="unitData.length > 1"
-                @click.stop="handleDel(item)"
-              ></i>
            </el-menu-item>
          </el-menu>
        </div>
-        <div
+        <div class="map-drawer-click map-drawer" v-if="!isShowdrawer" @click="
-          class="map-drawer-click map-drawer"
+          () => {
-          v-if="!isShowdrawer"
+            this.isShowdrawer = !this.isShowdrawer;
-          @click="
+          }
-            () => {
+        "></div>
-              this.isShowdrawer = !this.isShowdrawer;
+        <div class="map-drawer-expand map-drawer" v-else @click="
-            }
+          () => {
-          "
+            this.isShowdrawer = !this.isShowdrawer;
-        ></div>
+          }
-        <div
+        "></div>
-          class="map-drawer-expand map-drawer"
-          v-else
-          @click="
-            () => {
-              this.isShowdrawer = !this.isShowdrawer;
-            }
-          "
-        ></div>
      </div>
      <div class="leftCon">
        <!-- 分屏左侧预览 -->
@@ -81,28 +55,14 @@
        <!-- 表单内容区域 -->
        <div class="rightContainer">
          <el-tabs v-model="tabName" @tab-click="tabClick">
-            <el-tab-pane
+            <el-tab-pane :label="item.name" :name="item.value" v-for="item in tabList" :key="item.value">
-              :label="item.name"
-              :name="item.value"
-              v-for="item in tabList"
-              :key="item.value"
-            >
            </el-tab-pane>
          </el-tabs>
-          <component
+          <component :key="fresh" :is="componentTag" v-bind="currentSelectProps" />
-            :key="fresh"
-            :is="componentTag"
-            v-bind="currentSelectProps"
-          />
        </div>
      </div>
    </div>
-    <fqsqDialog
+    <fqsqDialog v-model="isDialog" :djywbm="$route.query.sqywbm" :isJump="true" @updateDialog="updateDialog" />
-      v-model="isDialog"
-      :djywbm="$route.query.sqywbm"
-      :isJump="true"
-      @updateDialog="updateDialog"
-    />
  </div>
 </template>
@@ -127,7 +87,7 @@ export default {
  components: {
    fqsqDialog,
  },
-  data() {
+  data () {
    return {
      isDialog: false,
      // 流程图
@@ -166,17 +126,17 @@ export default {
      clxxTab: {},
    };
  },
-  mounted() {
+  mounted () {
    this.loadBdcdylist();
    this.flowInitParam();
  },
  methods: {
    // 更新列表
-    updateDialog() {
+    updateDialog () {
      this.loadBdcdylist();
    },
    // 删除左侧列表
-    handleDel(item) {
+    handleDel (item) {
      this.$confirm("确定要删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
@@ -202,7 +162,7 @@ export default {
          });
        });
    },
-    handleBatchDel() {
+    handleBatchDel () {
      let that = this;
      this.$popup({
        title: "批量删除",
@@ -214,14 +174,14 @@ export default {
          bsmSlsq: this.bsmSlsq,
          dataList: this.unitData,
        },
-        cancel: function () {}, //取消事件的回调
+        cancel: function () { }, //取消事件的回调
        confirm: function () {
          that.loadBdcdylist();
        }, //确认事件的回调
      });
    },
    //加载流程初始参数
-    flowInitParam() {
+    flowInitParam () {
      var formdata = new FormData();
      formdata.append("bsmSlsq", this.bsmSlsq);
      formdata.append("bestepid", this.bestepid);
@@ -261,6 +221,7 @@ export default {
            this.$popup({
              title: "流程图",
              btnShow: true,
+              height: '250px',
              editItem: "workflow/components/flowChart",
              formData: this.imgSrc,
            });
@@ -268,8 +229,8 @@ export default {
          break;
        case "B2": //材料分屏按钮
          this.splitScreen = this.splitScreen ? false : true;
-          this.$store.dispatch("app/settScreen", this.splitScreen);          
+          this.$store.dispatch("app/settScreen", this.splitScreen);
-          if (this.splitScreen) {            
+          if (this.splitScreen) {
            //如果当前选项卡为材料信息内容，递减到上一个选项卡内容
            if (this.tabName == this.clxxTab.value) {
              this.tabName = this.tabList[this.clxxIndex - 1].value;
@@ -278,7 +239,7 @@ export default {
            //删除材料信息选项卡数据
            this.tabList.splice(this.clxxIndex, 1);
          } else {
-             //新增材料信息选项卡数据
+            //新增材料信息选项卡数据
            this.tabList.splice(this.clxxIndex, 0, this.clxxTab);
          }
          break;
@@ -303,6 +264,20 @@ export default {
        case "B5":
          this.zsylFlag = true;
          break;
+        case "B7":
+          this.$popup({
+            title: "证书领取",
+            editItem: "workflow/components/zslq",
+            height: "500px",
+            formData: {},
+            cancel: () => {
+              console.log("取消回调");
+            },
+            confirm: () => {
+              console.log("确认回调");
+            },
+          })
+          break;
        case "back": //退回按钮
          break;
        case "transfer": //转件按钮
@@ -339,7 +314,7 @@ export default {
      }
    },
    //读取申请单元信息
-    loadBdcdylist() {
+    loadBdcdylist () {
      var formdata = new FormData();
      formdata.append("bsmSlsq", this.bsmSlsq);
      formdata.append("bestepid", this.bestepid);
@@ -351,22 +326,22 @@ export default {
      });
    },
    //申请单元点击事件
-    unitClick(index) {
+    unitClick (index) {
      if (this.currentSelectProps.bsmSldy != this.unitData[index].bsmSldy) {
        this.currentSelectProps = this.unitData[index];
        this.fresh += 1;
      }
    },
    //表单选项卡事件
-    tabClick(tab, event) {
+    tabClick (tab, event) {
      this.getFromRouter(tab.name);
    },
    //切换选项卡内容组件
-    getFromRouter(tabname) {
+    getFromRouter (tabname) {
      this.componentTag = getForm(tabname);
    },
    //发送下一个环节
-    send(obj) {
+    send (obj) {
      const h = this.$createElement;
      this.$msgbox({
        title: "您确定转出吗？",