项目资料收集

src/views/project/gist/create.vue

@@ -1,106 +1,79 @@
 <template>
-    <div class="hc-layout-box create-tips">
-        <hc-card title="有标题的卡片" :scrollbar="true">
-            <template #header>
-                <div class="project-title">工作重点填写</div>
-            </template>
-            <el-form :inline="true" :model="baseForm" label-width="auto" :rules="baseFormRules" label-position="left">
-                <div class="hc-form-item">
-                    <el-form-item label="选择项目项目阶段:" prop="key1">
-                        <el-select
-                            v-model="baseForm.key1"
-                            placeholder="请选择"
-                        >
-                            <el-option
-                                v-for="item in stateOptions"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value"
-                            />
-                        </el-select>
-                    </el-form-item>
-                </div>
-                <div class="hc-form-item">
-                    <el-form-item label="目标任务:" prop="key2">
-                        <el-input v-model="baseForm.key2" placeholder="请输入" clearable type="textarea" />
-                    </el-form-item>
-                </div>
-                <div v-for="(item, index) in yearDetails" :key="index" class="year-detail">
-                    <hc-card>
-                        <el-form :inline="true" :model="item" label-width="auto" :rules="yearFormRules" class="mt-3" label-position="left">
-                            <div class="hc-form-item">
-                                <el-form-item label="选择年份:" prop="key1">
-                                    <el-date-picker
-                                        v-model="item.key1"
-                                        type="year"
-                                        range
-                                        placeholder="开始年份"
-                                    />
-                                    <span>-</span>
-                                    <el-date-picker
-                                        v-model="item.key2"
-                                        type="year"
-                                        range
-                                        placeholder="结束年份"
-                                    />
-                                </el-form-item>
-                            </div>
-                            <div class="hc-form-item">
-                                <el-form-item label="工作任务:" prop="key3">
-                                    <el-input v-model="item.key3" placeholder="请输入" clearable type="textarea" />
-                                </el-form-item>
-                            </div>
-                            <div class="hc-form-item">
-                                <el-form-item label="责任单位:" prop="key4">
-                                    <el-input v-model="item.key4" placeholder="请输入" clearable />
-                                </el-form-item>
-                            </div>
-                        </el-form>
-                    </hc-card>
-                    <div>
-                        <div>
-                            <el-button @click="addYearDeatil(item, index)">
-                                +
-                            </el-button>
-                        </div>
-                        <div>
-                            <el-button @click="deleteYearDeatil(item, index)">
-                                -
-                            </el-button>
-                        </div>
+    <hc-card scrollbar is-action-btn class="create-gist">
+        <template #header>
+            <div class="flex-1 text-center text-[24px] font-bold">工作重点填写</div>
+        </template>
+        <el-form ref="baseFormRef" :model="baseForm" :rules="baseFormRules" label-position="top" label-width="auto">
+            <el-form-item label="选择项目项目阶段:" prop="key1">
+                <el-select v-model="baseForm.key1" placeholder="请选择">
+                    <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="目标任务:" prop="key2">
+                <el-input v-model="baseForm.key2" placeholder="请输入" clearable type="textarea" />
+            </el-form-item>
+        </el-form>
+        <template v-for="(item, index) in baseForm.gistList" :key="index">
+            <hc-card-item class="gist-detail">
+                <div class="hc-form-gist-action hc-flex">
+                    <div class="add hc-flex-center h-[24px] w-[24px]" @click="addGistList">
+                        <hc-icon name="add" fill />
+                    </div>
+                    <div class="subtract hc-flex-center h-[24px] w-[24px]" @click="delGistList(index)">
+                        <hc-icon name="subtract" fill />
                     </div>
                 </div>
-            </el-form>
-            <div class="action-box">
-                <el-button type="info">
-                    <span class="text-white">取消</span>
-                </el-button>
-                <el-button color="#20C98B" type="primary">
-                    <span class="text-white">创建</span>
-                </el-button>
-                <el-button type="warning">
-                    <span class="text-white">保存</span>
-                </el-button>
-            </div>
-        </hc-card>
-    </div>
+                <el-form :ref="(el) => setGistRefs(el, index)" :model="item" :rules="gistFormRules" label-position="left" label-width="auto">
+                    <el-form-item label="选择年份:" prop="key1">
+                        <hc-date-year v-model="item.key1" v-model:end="item.key1" />
+                    </el-form-item>
+                    <el-form-item label="工作任务:" prop="key3">
+                        <el-input v-model="item.key3" placeholder="请输入" clearable type="textarea" />
+                    </el-form-item>
+                    <el-form-item label="责任单位:" prop="key4">
+                        <el-input v-model="item.key4" placeholder="请输入" clearable />
+                    </el-form-item>
+                </el-form>
+            </hc-card-item>
+        </template>
+        <template #action>
+            <el-button v-if="formInfo.id" type="info" @click="cancelClick">取消</el-button>
+            <el-button v-if="!formInfo.id" color="#20C98B" type="primary" class="text-white" @click="createClick">创建</el-button>
+            <el-button type="warning" @click="saveClick">保存</el-button>
+        </template>
+    </hc-card>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
+import { deepClone, getArrValue, getRandom, isNullES } from 'js-fast-way'
+
+const props = defineProps({
+    form: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+//事件
+const emit = defineEmits(['back'])
+
+//监听权限
+const formInfo = ref(props.form)
+watch(() => props.form, (data) => {
+    formInfo.value = data
+})
+
+//渲染完成
+onMounted(() => {
+    console.log(formInfo.value)
+})
+
+const baseFormRef = ref(null)
 const baseForm = ref({
-     key1:'',
-     key2: '',
-     key3:'',
-     key4:'',
-     key5:'',
-     key6:'',
-     key7:'',
-     key8:'',
-     key9:'',
-  
-     
-   })
+    key1:'', key2: '',
+    gistList: [{ key3: '111' }],
+})
 const baseFormRules = {
     key1: {
         required: true,
@@ -112,97 +85,113 @@ const baseFormRules = {
         trigger: 'blur',
         message: '请输入目标任务',
     },
-    key4: {
-        required: true,
-        trigger: 'blur',
-        message: '请选择项目类型',
-    },
-    role: {
-        required: true,
-        trigger: 'blur',
-        message: '请选择角色',
-    },
 }
 //项目阶段
 const stateOptions = ref([
-{
-    value: '1',
-    label: '紧盯重大项目，推动交通投资稳进',
-  },
-  {
-    value: '2',
-    label: '深化战略研究，优化交通规划体系',
-  },
-  {
-    value: '3',
-    label: '锚定战略目标，强化交通支撑引领作用',
-  },
+    { value: '1', label: '紧盯重大项目，推动交通投资稳进' },
+  { value: '2', label: '深化战略研究，优化交通规划体系' },
+  { value: '3', label: '锚定战略目标，强化交通支撑引领作用' },
 ])
 
-
-const yearFormRules = {
+//处理ref
+const gistRefs = ref([])
+const setGistRefs = (el, index) => {
+    if (el) {
+        try {
+            gistRefs.value[index] = el
+        } catch (error) {
+            gistRefs.value.push(el)
+        }
+    }
+}
+const gistFormRules = {
     key1: {
         required: true,
         trigger: 'blur',
         message: '请选择年份',
     },
-
-}
-//增加年份数据
-const yearDetails = ref([
-    {
-        key1:'',
-        key2: '',
-        key3:'',
-        key4:'',
-    
-    },
-])
-const addYearDeatil = (item, index)=>{
-    yearDetails.value.splice(index, 0, {
-        key1:'',
-        key2: '',
-        key3:'',
-        key4:'',
-    })
-   
 }
-const deleteYearDeatil = (item, index)=>{
-    console.log(yearDetails.value)
-    yearDetails.value.splice( index, 1)
+
+//新增工作重点
+const addGistList = () => {
+    const list = getArrValue(baseForm.value.gistList)
+    list.push({ id: getRandom() })
 }
-</script>
 
-<style scoped lang="scss">
-.hc-layout-box{
-    position: relative;
-    height: 100%;
-    width: 100%;
+//删除工作重点
+const delGistList = (index) => {
+    const form = deepClone(baseForm.value)
+    const list = getArrValue(form.gistList)
+    if (list.length <= 1) {
+        window.$message.warning('至少需要保留一个任务')
+        return
+    }
+    list.splice(index, 1)
+    baseForm.value = form
 }
-.project-title{
-    font-size: 24px;
-    font-weight: bold;
-    text-align: center;
+
+
+//取消
+const cancelClick = () => {
+    emit('back')
 }
-.year-detail{
-    padding: 40px;
-    height: 280px;
-    display: flex;
 
+//创建
+const createClick = () => {
+    const form = formInfo.value
+    if (isNullES(form.id)) cancelClick()
+    console.log('创建')
 }
-.action-box{
- 
- text-align: center;
- width: 100%;
+
+//保存
+const saveClick = () => {
+    const form = formInfo.value
+    if (isNullES(form.id)) cancelClick()
+    console.log('保存')
 }
-</style>
+</script>
 
-<style>
-.create-tips .el-card.hc-card-box.hc-new-card-box .hc-card-header-box{
-    justify-content: center;
+<style lang="scss">
+.hc-div-new-card-box.create-gist .el-card.hc-card-box.hc-new-card-box .hc-card-main .hc-card-main-body {
+    padding: 14px;
+    .el-scrollbar__bar.is-vertical {
+        right: -16px;
+    }
 }
-.create-tips .el-card.hc-card-box.hc-new-card-box .hc-card-header-box .hc-card-header{
-    flex:none
+.hc-card-item-box.gist-detail {
+    padding: 20px;
+    background: #f7f7f7;
+    border-radius: 5px;
+    margin-top: 14px;
+    .hc-form-gist-action {
+        position: absolute;
+        color: #101010;
+        z-index: 999;
+        right: 0;
+        div {
+            cursor: pointer;
+            font-size: 20px;
+            border-radius: 2px;
+            i {
+                margin-top: 1px;
+            }
+        }
+        .add {
+            background: #409eff;
+            color: white;
+            &:hover {
+                background: #337ecc;
+            }
+        }
+        .subtract {
+            margin-left: 8px;
+            background: #f56c6c;
+            color: white;
+            &:hover {
+                background: #c45656;
+            }
+        }
+    }
 }
 </style>
 

src/views/project/middle.vue

@@ -6,11 +6,11 @@
             </hc-card>
         </div>
         <div class="content hc-h-full inline-block">
-            <AdminCreate v-if="menuKey === 'project-collect-admin-create'" :form="editFormInfo" @back="adminCreateBack" />
+            <AdminCreate v-if="menuKey === 'project-collect-admin-create'" :form="adminFormInfo" @back="adminCreateBack" />
             <AdminListe v-else-if="menuKey === 'project-collect-admin-list'" @edit="adminListeEdit" />
-            <hc-card v-else>
-                项目资料收集
-            </hc-card>
+            <GistCreate v-else-if="menuKey === 'project-collect-gist-create'" :form="gistFormInfo" @back="gistCreateBack" />
+            <GistListe v-else-if="menuKey === 'project-collect-gist-list'" @edit="gistListeEdit" />
+            <hc-empty v-else />
         </div>
     </div>
 </template>
@@ -23,6 +23,8 @@ import { getArrValue, isNullES } from 'js-fast-way'
 import HcMenuBar from '~src/layout/modules/MenuBar.vue'
 import AdminCreate from './admin/create.vue'
 import AdminListe from './admin/list.vue'
+import GistCreate from './gist/create.vue'
+import GistListe from './gist/list.vue'
 
 //初始化
 const router = useRouter()
@@ -37,7 +39,8 @@ onMounted(() => {
 const menuKey = ref('')
 const menuData = ref([])
 const menuChange = ({ code }) => {
-    editFormInfo.value = {}
+    adminFormInfo.value = {}
+    gistFormInfo.value = {}
     menuKey.value = code
     router.push({
         path: useRoutes.path,
@@ -67,23 +70,44 @@ const getMenuDefaultKey = async (data) => {
 }
 
 //项目列表编辑
-const editFormInfo = ref({})
+const adminFormInfo = ref({})
 const adminListeEdit = (row) => {
-    editFormInfo.value = row
-    menuKey.value = 'project-collect-admin-create'
+    toCollectAdmin('project-collect-admin-create', row)
+}
+
+//返回
+const adminCreateBack = () => {
+    toCollectAdmin('project-collect-admin-list')
+}
+
+//跳转到项目管理相关页面
+const toCollectAdmin = (code, row = {}) => {
+    adminFormInfo.value = row
+    menuKey.value = code
     router.push({
         path: useRoutes.path,
-        query: { code: 'project-collect-admin-create' },
+        query: { code },
     })
 }
 
+//工作要点列表编辑
+const gistFormInfo = ref({})
+const gistListeEdit = (row) => {
+    toCollectGist('project-collect-gist-create', row)
+}
+
 //返回
-const adminCreateBack = () => {
-    editFormInfo.value = {}
-    menuKey.value = 'project-collect-admin-list'
+const gistCreateBack = () => {
+    toCollectGist('project-collect-gist-list')
+}
+
+//跳转到工作要点相关页面
+const toCollectGist = (code, row = {}) => {
+    gistFormInfo.value = row
+    menuKey.value = code
     router.push({
         path: useRoutes.path,
-        query: { code: 'project-collect-admin-list' },
+        query: { code },
     })
 }
 </script>