feat:[模板列表][组件抽离ing]

src/components/Template/BaseInfoFormPcakge.vue

@@ -3,11 +3,11 @@
         <div v-for="(item, index) in formConfig" :key="index">
             <template v-if="item.type === 'cardItem'">
                 <div class="grid-container">
-                    <div v-for="(sItem, sIndex) in item.config" class="form-item" :class="sItem.span == 1 ? 'full-row' : ''"
-                        :key="sIndex">
+                    <div v-for="(sItem, sIndex) in item.config" class="form-item"
+                        :class="sItem.span == 1 ? 'full-row' : ''" :key="sIndex">
                         <template v-if="sItem.type === 'input'">
                             <div class="form-title">{{ sItem.label }}</div>
-                            <el-input :maxlength="sItem.maxlength || 30" :disabled="sItem.disabled"
+                            <Input :maxlength="sItem.maxlength || 30" :disabled="sItem.disabled"
                                 v-model="formFields[sIndex]" :class="sItem.borderType | getBorderType"
                                 :placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)" />
                         </template>
@@ -16,30 +16,59 @@
             </template>
             <template v-else-if="item.type === 'conditionItem'">
                 <div class="form-item ">
-                    <div class="form-title fs-16">{{ item.label }}</div>
-                    <div v-for="(sItem, sIndex) in item.config" class="flex">
+                    <div class="form-title fs-16" v-if="item.label">{{ item.label }}</div>
+                    <div v-for="(sItem, sIndex) in item.config" class="c-Item flex">
                         <div class="flex1 mr-24">
                             <div class="form-title">{{ sItem.label }}</div>
                             <div class="flex">
-                                <el-select class="flex1" v-model="formFields[sIndex]" multiple placeholder="请选择">
-                                    <el-option
-                                    v-for="op in sItem.options"
-                                    :key="op.value"
-                                    :label="op.label"
-                                    :value="op.value">
+                                <el-select class="flex1" :class="sItem.borderType | getBorderType" v-model="formFields[sIndex]" multiple :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)" >
+                                    <el-option v-for="op in sItem.options" :key="op.value" :label="op.label"
+                                        :value="op.value">
                                     </el-option>
                                 </el-select>
 
                             </div>
                         </div>
-                        <div class="flex1" v-show = "isShowOther(formFields[sIndex])">
+                        <div class="flex1" v-show="isShowOther(formFields[sIndex])">
                             <div class="form-title">其他</div>
                             <div class="flex">
-                                <el-input v-model="formFields[sItem.otherCode]" :class="sItem.borderType | getBorderType"></el-input>
+                                <el-input v-model="formFields[sItem.otherCode]"
+                                    :class="sItem.borderType | getBorderType"></el-input>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </template>
+            <template v-else-if="item.type === 'cellItem'">
+                <div class="form-item ">
+                    <div class="form-title fs-16" v-if="item.label">{{ item.label }}</div>
+                    <div class="grid-container">
+                        <div v-for="(sItem, sIndex) in item.config" class="c-Item " :class="sItem.span == 1 ? 'full-row' : ''" :key = "sIndex">
+                            <div class="form-title" v-if = "sItem.label">{{ sItem.label }}</div>
+                            <div v-if = "sItem.type === 'dateTime'">
+                                <el-date-picker
+                                v-model="formFields[sIndex]" 
+                                type="datetime"
+                                class="w-100"
+                                format = "yyyy/MM/DD HH:mm:ss"
+                                value-format = "yyyy/MM/DD HH:mm:ss"
+                                :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)">
+                                </el-date-picker>
+                            </div>
+                            <div v-else-if = "sItem.type === 'select'">
+                                <el-select class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[sIndex]" multiple :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)" >
+                                    <el-option v-for="op in sItem.options" :key="op.value" :label="op.label"
+                                        :value="op.value">
+                                    </el-option>
+                                </el-select>
+                            </div>
+                            <div v-else-if = "sItem.type === 'input'">
+                                <el-input class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[sIndex]" :placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)"></el-input>
                             </div>
                         </div>
-                        
                     </div>
+
                 </div>
             </template>
         </div>
@@ -47,8 +76,10 @@
 </template>
 
 <script>
+import Input from "./Input.vue";
 export default {
     components: {
+        Input
     },
     props: {
         formConfig: {
@@ -86,10 +117,10 @@ export default {
             }
             return typeObj[type] || ""
         },
-       
+
     },
     methods: {
-        isShowOther(v = []){
+        isShowOther(v = []) {
             return v.includes(-1);
         },
         //根据formConifg回填form表单数据
@@ -103,14 +134,14 @@ export default {
                     Object.keys(item.config).forEach(key => {
                         const currentConfig = item.config[key];
                         result[key] = formData[key];
-                        if(currentConfig.otherCode){//如果有其它的字段需要赋值给formData
-                            const {otherCode} = currentConfig;
+                        if (currentConfig.otherCode) {//如果有其它的字段需要赋值给formData
+                            const { otherCode } = currentConfig;
                             result[otherCode] = formData[otherCode]
-                            config[otherCode] = {label:"其他",type:"input"}
+                            config[otherCode] = { label: "其他", type: "input" }
                         }
                     });
-                    console.log(item.config,"config")
-                    if(item.config?.otherCode){
+                    console.log(item.config, "config")
+                    if (item.config?.otherCode) {
                         config[item.config?.otherCode] = item.config?.otherCode;
                     }
                 }
@@ -141,14 +172,16 @@ export default {
 }
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 .grid-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     /* 默认2列 */
     gap: 0 24px;
 }
-
+.w-100{
+    width: 100% !important;
+}
 .form-item {
     background: #fff;
     padding: 20px;
@@ -164,12 +197,16 @@ export default {
 .full-row {
     grid-column: span 2;
 }
-
+.c-Item{
+    &:not(:last-child){
+        margin-bottom: 16px;
+    }
+}
 .form-title {
     margin-bottom: 12px;
     font-size: 14px;
     font-weight: normal;
-    color:#606266;
+    color: #606266;
 }
 
 .orange-border {
@@ -216,18 +253,22 @@ export default {
     }
 
 }
-.fs-16{
+
+.fs-16 {
     font-size: 0.96rem;
     font-weight: bold;
-    color:#464647
+    color: #464647
 }
-.flex1{
-    flex:1;
+
+.flex1 {
+    flex: 1;
 }
-.flex{
+
+.flex {
     display: flex;
 }
-.mr-24{
+
+.mr-24 {
     margin-right: 24px;
 }
 </style>

src/components/Template/Input.vue

@@ -0,0 +1,80 @@
+<template>
+    <el-input v-bind="$attrs" v-on = "$listeners" :maxlength = "$attrs.maxlength || 30" v-model = "inputValue" :class="$attrs.borderType | getBorderType" />
+</template>
+
+<script>
+export default {
+    props:{
+        borderType: {
+            type: String,
+            default: ""
+        }
+    },
+    data(){
+        return {
+            inputValue: this.$attrs.modelValue
+        }
+    },
+    filters: {
+        getBorderType(type) {
+            const typeObj = {
+                orange: "orange-border",
+                green: "green-border",
+                blue: "blue-border",
+            }
+            return typeObj[type] || ""
+        },
+
+    },
+    methods:{
+        
+    }
+}
+</script>
+
+<style lang="scss">
+.orange-border {
+    input {
+        border-color: #f9c588;
+
+        &:focus {
+            border-color: #f9c588;
+        }
+
+        &:hover {
+            border-color: #f9c588;
+        }
+    }
+
+}
+
+.green-border {
+    input {
+        border-color: green;
+
+        &:focus {
+            border-color: green;
+        }
+
+        &:hover {
+            border-color: green;
+        }
+    }
+
+}
+
+.blue-border {
+    input {
+        border-color: #4ea2ff;
+
+        &:focus {
+            border-color: #4ea2ff;
+        }
+
+        &:hover {
+            border-color: #4ea2ff;
+        }
+    }
+
+}
+</style>

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

@@ -93,6 +93,20 @@ export default {
 							]
 						}
 					}
+				},
+				{
+					type:"cellItem",
+					label:"配置时间",
+					config:{
+						startDate:{
+							label:"开始时间",
+							type:"dateTime",
+						},
+						endDate:{
+							label:"结束时间",
+							type:"dateTime",
+						},
+					}
 				}
 			],
 			formData:{}

vue.config.js

@@ -34,8 +34,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
-        // target: `http://39.99.251.173:8080`,
+        // target: `http://localhost:8080`,
+        target: `http://39.99.251.173:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''