style:审批意见

@@ -16,7 +16,8 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="使用权结束时间：" prop="slsj">
-            <el-date-picker disabled v-model="ruleForm.slsj" type="datetime" placeholder="选择结束时间" value-format="yyyy-MM-dd">
+            <el-date-picker disabled v-model="ruleForm.slsj" type="datetime" placeholder="选择结束时间"
+              value-format="yyyy-MM-dd">
             </el-date-picker>
           </el-form-item>
         </el-col>
@@ -106,19 +107,22 @@
       <el-row :gutter="10">
         <el-col :span="8">
           <el-form-item label="使用权起始时间：" prop="syqqssj">
-            <el-date-picker disabled v-model="ruleForm.syqqssj" type="datetime" placeholder="选择起始时间" value-format="yyyy-MM-dd">
+            <el-date-picker disabled v-model="ruleForm.syqqssj" type="datetime" placeholder="选择起始时间"
+              value-format="yyyy-MM-dd">
             </el-date-picker>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="使用权结束时间：" prop="syqjssj">
-            <el-date-picker disabled v-model="ruleForm.syqjssj" type="datetime" placeholder="选择结束时间" value-format="yyyy-MM-dd">
+            <el-date-picker disabled v-model="ruleForm.syqjssj" type="datetime" placeholder="选择结束时间"
+              value-format="yyyy-MM-dd">
             </el-date-picker>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="使用期限：" prop="syqx">
-            <el-date-picker disabled v-model="ruleForm.syqx" type="datetime" placeholder="选择使用期限" value-format="yyyy-MM-dd">
+            <el-date-picker disabled v-model="ruleForm.syqx" type="datetime" placeholder="选择使用期限"
+              value-format="yyyy-MM-dd">
             </el-date-picker>
           </el-form-item>
         </el-col>
@@ -182,7 +186,6 @@ export default {
   data () {
     return {
       disabled: true,
-      flag: this.flag,
       flagTop: this.flag ? 'top' : '',
       qllxOption: [],
       djlxOption: [],
@@ -220,13 +223,13 @@ export default {
     };
   },
   methods: {
-    list(bsmSldy){
-      var formdata=new FormData();
+    list (bsmSldy) {
+      var formdata = new FormData();
       //可以通过append()方法来追加数据
-      formdata.append("bsmSldy",bsmSldy);
+      formdata.append("bsmSldy", bsmSldy);
       Init(formdata).then(res => {
         if (res.code === 200) {
-          console.log(res,1111)
+          console.log(res, 1111)
 
           this.ruleForm = res.result
         }

+<!--
+  功能：审批意见
+  作者：calliope
+-->
+<template>
+  <div class='spyj'>
+    <b class="spyj_title">审批表</b>
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
+      <div class="spyj_form">
+        <div class="item_left">
+          初审意见
+        </div>
+        <div class="item_right">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label-width="0" class="opinion_item" prop="csyj">
+                <el-input type="textarea" :rows="4" class="opinion" placeholder="请输入内容" v-model="ruleForm.csyj">
+                </el-input>
+                <el-popover placement="right" width="50" trigger="hover">
+                  <ul class="pointer">
+                    <li @click="handleClick">复审</li>
+                    <li>初审意见</li>
+                  </ul>
+                  <el-button class="opinion_btn" slot="reference">常用意见</el-button>
+                </el-popover>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="审查人" prop="scr">
+                {{ ruleForm.scr }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审核开始时间" prop="shkssj">
+                {{ ruleForm.shkssj }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审核结束时间" prop="shjssj">
+                {{ ruleForm.shjssj }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="spyj_form">
+        <div class="item_left">
+          复审意见
+        </div>
+        <div class="item_right">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label-width="0" class="opinion_item" prop="csyj">
+                <el-input type="textarea" :rows="4" class="opinion" placeholder="请输入内容" v-model="ruleForm.csyj">
+                </el-input>
+                <el-popover placement="right" width="50" trigger="hover">
+                  <ul class="pointer">
+                    <li @click="handleClick">复审</li>
+                    <li>初审意见</li>
+                  </ul>
+                  <el-button class="opinion_btn" slot="reference">常用意见</el-button>
+                </el-popover>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="审查人" prop="scr">
+                {{ ruleForm.scr }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审核开始时间" prop="shkssj">
+                {{ ruleForm.shkssj }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审核结束时间" prop="shjssj">
+                {{ ruleForm.shjssj }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="spyj_form">
+        <div class="item_left">
+          核定意见
+        </div>
+        <div class="item_right">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label-width="0" class="opinion_item" prop="csyj">
+                <el-input type="textarea" :rows="4" class="opinion" placeholder="请输入内容" v-model="ruleForm.csyj">
+                </el-input>
+                <el-popover placement="right" width="50" trigger="hover">
+                  <ul class="pointer">
+                    <li @click="handleClick">复审</li>
+                    <li>初审意见</li>
+                  </ul>
+                  <el-button class="opinion_btn" slot="reference">常用意见</el-button>
+                </el-popover>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="审查人" prop="scr">
+                {{ ruleForm.scr }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审核开始时间" prop="shkssj">
+                {{ ruleForm.shkssj }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="审核结束时间" prop="shjssj">
+                {{ ruleForm.shjssj }}
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="submit_button">
+        <el-button type="primary">保存</el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+
+export default {
+  components: {},
+  data () {
+    return {
+      ruleForm: {
+        csyj: '',
+        scr: '',
+      },
+      rules: {
+        csyj: [
+          { required: true, message: '请输入审批意见', trigger: 'blur' }
+        ],
+      }
+    }
+  },
+  methods: {
+    handleClick () {
+      console.log(1)
+    }
+  },
+}
+</script>
+<style scoped lang='scss'>
+@import '~@/styles/mixin.scss';
+
+.spyj {
+  margin-left: 5px;
+
+  .spyj_title {
+    text-align: center;
+    font-size: 24px;
+    display: block;
+    margin-bottom: 10px;
+  }
+
+  /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;
+      @include flex-center;
+      border-right: 1px solid $borderColor;
+    }
+
+    .item_right {
+      flex: 1;
+      width: 100%;
+
+      /deep/.el-form-item__label {
+        background-color: #F8F8FA;
+      }
+
+      .opinion_item {
+        /deep/.el-form-item__error {
+          margin-top: -16px !important;
+          left: 3px;
+        }
+
+        border-bottom: 1px solid $borderColor;
+      }
+
+      .opinion {
+        position: relative;
+
+        /deep/.el-textarea__inner {
+          border: none;
+        }
+      }
+
+      .opinion_btn {
+        position: absolute;
+        right: 15px;
+        bottom: 10px;
+      }
+    }
+  }
+
+  .submit_button {
+    text-align: center;
+    margin: 15px 0;
+  }
+}
+</style>
\ No newline at end of file

@@ -5,32 +5,30 @@
         <li @click="operation(index, item)" v-for="(item, index) in headerleftList.slice(0, headerleftList.length - 4)"
           :key="index">
           <svg-icon :icon-class="item.icon" />
-          <span class="iconName">{{  item.name  }}</span>
+          <span class="iconName">{{ item.name }}</span>
         </li>
       </ul>
       <ul>
         <li @click="operation(index, item)" v-for="(item, index) in headerleftList.slice(-4)" :key="index">
           <svg-icon class="icon" :icon-class="item.icon" />
-          <span class="iconName">{{  item.name  }}</span>
+          <span class="iconName">{{ item.name }}</span>
         </li>
       </ul>
     </div>
     <div class="tabsList">
-      <div class="tabsList-left"  >
-        <div class="map-drawer-click" 
-              v-if='!isShowdrawer'
-              @click=" () => {
-                this.isShowdrawer = !this.isShowdrawer;}">
-              </div>
-        <div class="map-drawer-expand" 
-              v-else
-              @click=" () => {
-                  this.isShowdrawer = !this.isShowdrawer;}">
-              </div>
+      <div class="tabsList-left">
+        <div class="map-drawer-click" v-if='!isShowdrawer' @click="() => {
+          this.isShowdrawer = !this.isShowdrawer;
+        }">
+        </div>
+        <div class="map-drawer-expand" v-else @click="() => {
+          this.isShowdrawer = !this.isShowdrawer;
+        }">
+        </div>
         <ul v-if='this.isShowdrawer'>
-          <p>受理单元列表({{unitData.length}})</p>
-          <div v-for='(item,index) in unitData' :key='index'>
-            <li @click='unitClick(item)'>{{item.bdcdyh}}</li>
+          <p>受理单元列表({{ unitData.length }})</p>
+          <div v-for='(item, index) in unitData' :key='index'>
+            <li @click='unitClick(item)'>{{ item.bdcdyh }}</li>
             <div class="xian"></div>
           </div>
         </ul>
@@ -43,8 +41,9 @@
         <el-tabs v-model="activeName">
           <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index">
             <div class="splitScreen-con" v-if='index == 0'>
-              <component ref='slxx' :is="editItem" :flag="flag" :key="key" />
+              <component :is="editItem" :flag="flag" :key="key" />
             </div>
+            <component :is="editItem" v-else :key="key" />
           </el-tab-pane>
         </el-tabs>
       </div>
@@ -62,11 +61,11 @@ export default {
   components: { zc, thDialog },
   data () {
     return {
-      zcDialog:false,
-      thflag:false,
-      queryForm:{
-        bsmSlsq:"",
-        bestepid:"",
+      zcDialog: false,
+      thflag: false,
+      queryForm: {
+        bsmSlsq: "",
+        bestepid: "",
       },
       isShowdrawer: true,
       key: 0,
@@ -139,14 +138,15 @@ export default {
       editItem: '',
       issplitScreen: false,
       unitData: [],
-      taskId:"",
-      bsmBusiness:"",
+      taskId: "",
+      bsmBusiness: "",
     };
   },
   watch: {
     activeName: {
       handler (newName, oldName) {
-        let itemObj = { '1': 'slxx', '2': 'clxx' }
+        console.log(newName, 'newName');
+        let itemObj = { '1': 'slxx', '2': 'clxx', '3': 'spyj' }
         this.editItem = this.loadView(itemObj[newName])
       },
       immediate: true