feat:[模板管理][组件提取ing]

src/components/Template/HandleFormItem.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex w-100">
         <div class="flex1 flex">
-            <el-input v-if="type === 'input'" :maxlength="item.maxlength || 30" :disabled="item.disabled"
+            <el-input v-if="type === 'input'" :maxlength="item.maxlength || 30" :disabled="getDisabled()"
                 :class="item.fillType | getFillType"
                 :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)" 
                 v-model="inputValue" />
@@ -9,6 +9,7 @@
                 :multiple = "item.multiple" 
                 :class="item.fillType | getFillType" 
                 v-model="inputValue"
+                :disabled="getDisabled()"
                 :placeholder="item.placeholder ? item.placeholder : ('请选择' + item.label)" 
                 @change = "onSelectChange"
                 >
@@ -20,11 +21,13 @@
                     v-else-if="type === 'dateTime'" class="flex1" 
                     :class="item.fillType | getFillType" 
                     v-model="inputValue"
+                    :disabled="getDisabled()"
                     format="yyyy/MM/DD HH:mm:ss" value-format="yyyy/MM/DD HH:mm:ss"
                     :placeholder="item.placeholder ? item.placeholder : ('请选择' + item.label)">
                 </el-date-picker>
         </div>
-        <div class="handle-row">
+        <!-- qc才能操作 -->
+        <div class="handle-row" v-if="isShowHandle()">
             <i class="el-icon-question"></i>
             <el-checkbox></el-checkbox>
             <span @click="onCopy">复制</span>
@@ -40,10 +43,6 @@ export default {
             type:String,
             default:"input"
         },
-        fillType: {
-            type: String,
-            default: ""
-        },
         item: {
             type: Object,
             default: () => {
@@ -91,6 +90,30 @@ export default {
 
     },
     methods: {
+        //判断是否显示操作按钮
+        isShowHandle(){
+            const {fillType} = this.item;
+            const {templateStatus} = this.$store.state.template;
+            //只有当模板状态是qc和实际填报时，才显示操作按钮
+            return (templateStatus === "qc" || templateStatus === "actFill")&&fillType === "actFill";
+        },
+        //判断是否禁用
+        getDisabled(){
+            const {item} = this;
+            const {fillType} = item;
+            if(item.hasOwnProperty("disabled")){
+                return item.disabled
+            }else{
+                const {templateStatus} = this.$store.state.template;
+                if(fillType === "actFill"){//当模板状态是实际填写时，只有当fillType是actFill时才能填写
+                    return templateStatus !== "actFill"
+                }else if(fillType === "preFill"){//当模板状态是预填写时，只有当fillType是preFill才能填写
+                    return templateStatus !== "preFill"
+                }else{
+                    return true
+                }
+            }
+        },
         onCopy() {
             this.$emit("copy")
         },
@@ -132,6 +155,9 @@ export default {
         &:hover {
             border-color: #f9c588;
         }
+        &:disabled {
+            border-color: #f9c588 !important;
+        }
     }
 
 }
@@ -147,6 +173,9 @@ export default {
         &:hover {
             border-color: green;
         }
+        &:disabled {
+            border-color: green !important;
+        }
     }
 
 }
@@ -162,6 +191,9 @@ export default {
         &:hover {
             border-color: #4ea2ff;
         }
+        &:disabled {
+            border-color: #4ea2ff !important;
+        }
     }
 
 }

src/store/index.js

@@ -7,6 +7,7 @@ import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
 import getters from './getters'
+import template from './modules/template'
 
 Vue.use(Vuex)
 
@@ -17,7 +18,8 @@ const store = new Vuex.Store({
     user,
     tagsView,
     permission,
-    settings
+    settings,
+    template
   },
   getters
 })

src/store/modules/template.js

@@ -0,0 +1,17 @@
+const template = {
+  namespaced: true,
+  state: {
+    templateStatus:"",//模板状态 "actFill" 实际填报 "preFill" 预填 ”qc“
+  },
+  mutations: {
+    SET_TEMPLATE_STATUS: (state, status) => {
+      state.templateStatus = status
+    }
+  },
+  actions: {
+    setTemplateStatus({ commit }, status) {
+      commit('SET_TEMPLATE_STATUS', status)
+    }
+  }
+}
+export default template

src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue

@@ -30,9 +30,11 @@ import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge";
 import LineLabel from "@/components/Template/LineLabel";
 import TableList from "@/components/Template/Table";
 import Step from "@/components/Template/Step";
+import templateMixin from "../../mixins/templateMixin";
 export default {
 	name: "SWYPFXRYPZB",
 	components: { BaseInfoFormPcakge,LineLabel,TableList,Step },
+	mixins: [templateMixin],
 	props: {
 		value: {
 			type: {},

src/views/business/comps/template/mixins/templateMixin.js

@@ -0,0 +1,16 @@
+export default {
+  data() {
+  
+  },
+  mounted() {
+        setTimeout(() => {
+          this.setTemplateStatus("actFill")
+        }, 4000)
+  },
+  methods: {
+    setTemplateStatus(status) {
+      this.$store.commit('template/SET_TEMPLATE_STATUS', status)
+    }
+  },
+
+}