style:证书领取界面的开发

@@ -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;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    box-shadow: 0px 0px 2px 0px;
-    border-radius: 0 0 10px 10px;
-    position: absolute;
-    bottom: 0;
-    background: #ffffff;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  box-shadow: 0px 0px 1px 0px;
+  border-radius: 0 0 5px 5px;
+  position: absolute;
+  bottom: 0;
+  background: #ffffff;
 }
 
 

 <template>
-  <dialogBox title="证书领取" @submitForm="submitForm" saveButton="保存" width="60%" height='30%' @closeDialog="closeDialog"
-    v-model="value">
-    <div class="from-clues-content">
+  <div class="zslq">
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
+      <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-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" style="display:flex;">
-      <el-form-item label="领证人" prop="lzrxm">
-        <el-input v-model="ruleForm.lzrxm"></el-input>
-      </el-form-item>
-      <el-form-item label="证件类型" prop="lzrzjlb">
-        <el-select v-model="ruleForm.lzrzjlb" filterable clearable placeholder="请选择">
-          <el-option v-for="item in dictData['A30']" :key="item.dcode" :label="item.dname" :value="item.dcode">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="证件号" prop="lzrzjh">
-        <el-input v-model="ruleForm.lzrzjh"></el-input>
-      </el-form-item>
-      <el-form-item label="领证人电话" prop="lzrdh">
-        <el-input v-model="ruleForm.lzrdh"></el-input>
-      </el-form-item>
+      <el-row>
+        <el-col :span="6">
+          <el-form-item label="领证人" prop="lzrxm">
+            <el-input v-model="ruleForm.lzrxm"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="证件类型" prop="lzrzjlb">
+            <el-select v-model="ruleForm.lzrzjlb" filterable clearable placeholder="请选择">
+              <el-option v-for="item in zslqList" :key="item.dcode" :label="item.dname" :value="item.dcode">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="证件号" prop="lzrzjh">
+            <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 () { },
     //列表初始化

@@ -11,11 +11,7 @@
       </ul>
       <!-- 右侧流程按钮 -->
       <ul>
-        <li
-          @click="operation(index, item)"
-          v-for="(item, index) in rightButtonList"
-          :key="index"
-        >
+        <li @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
-              type="text"
-              class="batchDel"
-              @click="handleBatchDel"
-              v-if="unitData.length > 1"
-              >批量删除</el-button
-            >
+            <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
-              v-for="(item, index) in unitData"
-              :index="index.toString()"
-              :key="index"
-            >
+            <el-menu-item 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
-                class="el-icon-delete"
-                v-if="unitData.length > 1"
-                @click.stop="handleDel(item)"
-              ></i>
+              <i class="el-icon-delete" v-if="unitData.length > 1" @click.stop="handleDel(item)"></i>
             </el-menu-item>
           </el-menu>
         </div>
-        <div
-          class="map-drawer-click map-drawer"
-          v-if="!isShowdrawer"
-          @click="
-            () => {
-              this.isShowdrawer = !this.isShowdrawer;
-            }
-          "
-        ></div>
-        <div
-          class="map-drawer-expand map-drawer"
-          v-else
-          @click="
-            () => {
-              this.isShowdrawer = !this.isShowdrawer;
-            }
-          "
-        ></div>
+        <div class="map-drawer-click map-drawer" v-if="!isShowdrawer" @click="
+          () => {
+            this.isShowdrawer = !this.isShowdrawer;
+          }
+        "></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
-              :label="item.name"
-              :name="item.value"
-              v-for="item in tabList"
-              :key="item.value"
-            >
+            <el-tab-pane :label="item.name" :name="item.value" v-for="item in tabList" :key="item.value">
             </el-tab-pane>
           </el-tabs>
-          <component
-            :key="fresh"
-            :is="componentTag"
-            v-bind="currentSelectProps"
-          />
+          <component :key="fresh" :is="componentTag" v-bind="currentSelectProps" />
         </div>
       </div>
     </div>
-    <fqsqDialog
-      v-model="isDialog"
-      :djywbm="$route.query.sqywbm"
-      :isJump="true"
-      @updateDialog="updateDialog"
-    />
+    <fqsqDialog 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);          
-          if (this.splitScreen) {            
+          this.$store.dispatch("app/settScreen", 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: "您确定转出吗？",