项目类型设置

src/renderer/src/views/system/model.vue

@@ -1,27 +1,123 @@
 <template>
-    <hc-card title="模型设置">
+    <hc-card>
+        <template #header>
+            <div class="hac-card-title g">项目类型设置</div>
+        </template>
         <template #extra>
-            <el-button type="primary">保存</el-button>
+            <HcIcon name="add-box" class="blueColor cursor-pointer text-2xl" @click="addClick" />
         </template>
-        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto">
-            <el-row :gutter="20">
-                <el-col :span="6">
-                    <el-form-item label="收益年增长率：">
-                        <el-input v-model="formModel.name" placeholder="请输入收益年增长率" clearable/>
+        <div class="type-list">
+            <div class="grid grid-cols-2 gap-4">
+                <div v-for="(item, index) in formModel.typeList" :key="index" class="type-list-item" @click="typeClick(item)">
+                    {{ item.type }}
+                </div>
+            </div>
+        </div>
+
+        <hc-new-dialog v-model="addModal" title="新增路线类型" widths="40rem">
+            <el-form ref="formRef" :model="baseForm" :rules="baseFormRules" label-width="auto">
+                <div class="hc-form-item">
+                    <el-form-item label="类型名称:" prop="type">
+                        <el-input v-model="baseForm.type" clearable placeholder="请输入" />
                     </el-form-item>
-                </el-col>
-            </el-row>
-        </el-form>
+                </div>
+            </el-form>
+        </hc-new-dialog>
+        <hc-new-dialog v-model="dealModal" :title="dealForm.type" widths="38rem">
+            <HcIcon name="add-box" class="blueColor cursor-pointer text-2xl" @click="addItemClick" />
+            <el-form ref="dealFormRef" :model="dealForm" label-width="auto">
+                <div v-for="(item, index) in dealForm.list" :key="index" class="hc-form-item mb-2 items-center justify-center">
+                    <div class="mr-2 whitespace-nowrap">选项{{ index + 1 }}</div>
+                    <el-input v-model="item.type" clearable placeholder="请输入" />
+                </div>
+            </el-form>
+            <template #footer>
+                <el-button hc-btn @click="dealModal">取消</el-button>
+                <el-button hc-btn type="primary" :loading="dealModalLoading" @click="dealModalSubmit">保存</el-button>
+            </template>
+        </hc-new-dialog>
     </hc-card>
 </template>
 
 <script setup>
-import {ref} from "vue";
+import { ref } from 'vue'
+import { deepClone } from 'js-fast-way'
+const formModel = ref({
+    typeList:[{ type:'项目类型1' }, { type:'项目类型2' }, { type:'项目类型2' }],
+})
 
-const formModel = ref({})
-const formRules = ref({})
+const addClick = () => { 
+    addModal.value = true
+}
+const addModal = ref(false)
+const baseForm = ref({})
+const baseFormRules = ref({
+    type: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入类型名称',
+    },
+})
+const formRef = ref(null)
+const typeClick = (item) => {
+    console.log(item)
+    dealForm.value = deepClone(item)
+    dealForm.value.list = []
+    dealModal.value = true
+}
+const dealModal = ref(false)
+const dealForm = ref({})
+const dealFormRef = ref(null)
+const addItemClick = () => {
+    dealForm.value.list.push({})
+}
+const dealModalLoading = ref(false)
+const dealModalSubmit = async () => {
+    
+}
 </script>
 
 <style scoped lang="scss">
+.blueColor{
+    color:var(--el-color-primary-dark-2);
+}
+.hac-card-title {
+    color: #000;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    margin-left: 8px;
+    &::before {
+        content: '';
+        position: relative;
+        display: inline-block;
+        width: 5px;
+        height: 18px;
+        border-radius: 10px;
+        background-color: var(--el-color-primary-dark-2);
+        right: 8px;
+    }
+}
 
+.type-list {
+    padding: 0 20px;
+    
+    .type-list-item {
+        cursor: pointer;
+        padding: 5px 15px;
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+        background-color: #fff;
+        // height: 32px;
+        line-height: 32px;
+        color: #606266;
+        transition: border-color 0.2s;
+        justify-items: center;
+        
+        &:hover {
+            border-color: #c0c4cc;
+        }
+    }
+}
 </style>