fix: 修改 项目详情表单

修改表单展示样式
优化 人员、部门、行政区组件结构

client/src/components/TreeSelectV2/index.vue

@@ -6,7 +6,7 @@ number } from 'vue-types'; import { array } from 'vue-types';
       <template #reference>
         <el-input v-model="xzqdmName" readonly :disabled="disabled">
           <template #suffix>
-            <el-icon><ArrowUp /></el-icon>
+            <el-icon><ArrowDown /></el-icon>
           </template>
         </el-input>
       </template>
@@ -30,6 +30,7 @@ number } from 'vue-types'; import { array } from 'vue-types';
 
 <script setup lang="ts">
 import { ElTreeV2 } from 'element-plus'
+import { ArrowDown } from '@element-plus/icons-vue'
 
 defineOptions({
   name: 'TreeSelectV2'

client/src/service/project.ts

@@ -42,3 +42,10 @@ export const postSubProject = async (data: SubProject) => {
     '/business'
   )
 }
+
+/**
+ * 项目类型
+ */
+export const getProjectType = async () => {
+  return await request.get({ url: '/project-type/tree' }, '/business')
+}

client/src/service/system.ts

@@ -0,0 +1,31 @@
+import request from '@/config/axios'
+import { handleTree } from '@/utils/tree'
+
+/**
+ * 获取组织架构
+ */
+export const getAllUserSimpleByList = async () => {
+  const result = await request.get({
+    url: '/system/dept/list-all-user-simple'
+  })
+  return handleTree(
+    result.map((item) => {
+      return {
+        label: item['name'],
+        value: item['id'],
+        parentId: item['parentId'],
+        children: item['children']
+      }
+    }),
+    'value'
+  )
+}
+
+/**
+ * 获取行政区
+ */
+export const getAreaTree = async () => {
+  return await request.get({
+    url: '/system/area/tree'
+  })
+}

client/src/styles/index.scss

@@ -1,7 +1,7 @@
 @import './var.css';
 @import 'element-plus/theme-chalk/dark/css-vars.css';
 
-.reset-margin [class*='el-icon']+span {
+.reset-margin [class*='el-icon'] + span {
   margin-left: 2px !important;
 }
 
@@ -23,9 +23,8 @@
   }
 
   & .peg {
-    box-shadow:
-      0 0 10px var(--el-color-primary),
-      0 0 5px var(--el-color-primary) !important;
+    box-shadow: 0 0 10px var(--el-color-primary),
+    0 0 5px var(--el-color-primary) !important;
   }
 
   & .spinner-icon {
@@ -53,7 +52,44 @@ li {
 li {
   list-style: none;
 }
+
 .el-table .cell,
 .el-table td.el-table__cell div {
   font-size: 16px !important;
-}
+}
+
+.form-item-disable-style {
+  &.el-select.el-select--disabled,
+  &.el-input.is-disabled,
+  .el-select.el-select--disabled,
+  .el-input.is-disabled {
+
+    .el-input__wrapper {
+      background-color: unset;
+      box-shadow: none;
+      cursor: default;
+
+      &:hover {
+        box-shadow: none;
+      }
+    }
+
+    .el-input__inner {
+      font-size: 16px;
+      font-weight: 500;
+      color: #2d333c;
+      cursor: default;
+      -webkit-text-fill-color: #2d333c;
+    }
+
+    .el-input__suffix {
+      display: none;
+    }
+
+    .el-input__prefix {
+      .el-input__icon {
+        cursor: default;
+      }
+    }
+  }
+}

client/src/utils/tree.ts

@@ -397,3 +397,8 @@ export const treeToString = (tree: any[], nodeId) => {
   }
   return str
 }
+
+export const filterNodeMethod = (value, data) => {
+  if (!data) return
+  return data.name.includes(value)
+}

client/src/views/OaSystem/components/DistrictTree/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="treeSelectV2">
     <TreeSelectV2
-      :data="areaTree.list"
+      :data="areaTree"
       :props="{ label: 'name', value: 'id' }"
       v-model="xzqdm"
       :filter-method="filterNodeMethod"
@@ -12,12 +12,14 @@
 
 <script setup lang="ts">
 import TreeSelectV2 from '@/components/TreeSelectV2/index.vue'
-import request from '@/config/axios'
+import { filterNodeMethod } from '@/utils/tree'
+import { useQuery } from '@tanstack/vue-query'
+import { getAreaTree } from '@/service/system'
 
 defineOptions({
   name: 'DistrictTree'
 })
-const $props = defineProps({
+const props = defineProps({
   disabled: {
     type: Boolean,
     default: false
@@ -27,37 +29,24 @@ const $props = defineProps({
     default: null
   }
 })
-const $emit = defineEmits<{
-  (e: 'update:modelValue', v: any): void
-}>()
-const xzqdm = ref<string | number>(Number($props.modelValue))
-const areaTree = shallowReactive({ list: [] })
-const filterNodeMethod = (value: string, node: any) => {
-  if (!node) return
-  return node.name!.includes(value)
-}
-const queryAreaTreeAjax = (): void => {
-  const urlApi = `/system/area/tree`
-  request.get({ url: urlApi }).then((result) => {
-    areaTree.list = result
-  })
-}
-onMounted(() => {
-  queryAreaTreeAjax()
-})
-watch(xzqdm, (nVal) => {
-  $emit('update:modelValue', nVal)
+const emit = defineEmits<{ (e: 'update:modelValue', v: any): void }>()
+const xzqdm = computed({
+  get: () => Number(props.modelValue),
+  set: (val) => emit('update:modelValue', val)
 })
+const { data: areaTree } = useQuery([getAreaTree.name], getAreaTree)
 </script>
 
 <style lang="scss" scoped>
 .treeSelectV2 {
   position: relative;
+
   :deep(.el-popper) {
     width: 100% !important;
     left: 0px !important;
     right: 0px !important;
   }
+
   :deep(.el-input__suffix) {
     .el-icon {
       color: var(--el-select-input-color);
@@ -67,6 +56,7 @@ watch(xzqdm, (nVal) => {
       cursor: pointer;
     }
   }
+
   :deep(.is-focus) {
     .el-input__suffix .el-icon {
       transform: rotateZ(-180deg);

client/src/views/OaSystem/components/ProjectTypeTree/index.vue

@@ -7,42 +7,24 @@
     check-strictly
     :filter-node-method="filterNodeMethod"
     :props="{ label: 'name' }"
-    :data="projectTypeTree.list"
+    :data="projectTypeTree"
     :render-after-expand="false"
+    placeholder=" "
   />
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import request from '@/config/axios'
+import { useQuery } from '@tanstack/vue-query'
+import { getProjectType } from '@/service/project'
+import { filterNodeMethod } from '@/utils/tree'
 
-defineOptions({
-  name: 'ProjectTypeTree'
-})
-const $props = defineProps<{
-  modelValue: any
-}>()
-const $emit = defineEmits<{
-  (e: 'update:modelValue', v: any): void
-}>()
-/**
- * 获取行政区tree结构数据
- */
-const projectType = ref<string | number>()
-const projectTypeTree = shallowReactive({ list: [] })
-const filterNodeMethod = (value, data) => {
-  if (!data) return
-  return data.name.includes(value)
-}
-const queryAreaTreeAjax = (): void => {
-  const urlApi = `/project-type/tree`
-  request.get({ url: urlApi }, '/business').then((result) => {
-    projectTypeTree.list = result
-    projectType.value = $props.modelValue
-  })
-}
-queryAreaTreeAjax()
-watch(projectType, (nVal: any) => {
-  $emit('update:modelValue', nVal)
+defineOptions({ name: 'ProjectTypeTree' })
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: string): void }>()
+const projectType = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
 })
+
+const { data: projectTypeTree } = useQuery([getProjectType.name], getProjectType)
 </script>

client/src/views/OaSystem/components/UserOrgTree/index.vue

@@ -2,56 +2,25 @@
   <el-tree-select
     style="width: 100%"
     v-model="receiveUserId"
-    :data="allUserList.list"
+    :data="allUserList"
     :filter-node-method="filterNodeMethod"
     :render-after-expand="false"
+    placeholder=" "
     filterable
   />
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import request from '@/config/axios'
-import { handleTree } from '@/utils/tree'
+import { useQuery } from '@tanstack/vue-query'
+import { getAllUserSimpleByList } from '@/service/system'
+import { filterNodeMethod } from '@/utils/tree'
 
 defineOptions({ name: 'UserOrgTree' })
-const $props = defineProps<{
-  modelValue: any
-}>()
-const $emit = defineEmits<{
-  (e: 'update:modelValue', v: any): void
-}>()
-const receiveUserId = ref<any[]>($props.modelValue)
-const allUserList = shallowReactive<{
-  list: any
-}>({ list: [] })
-let sourceAllUserList: any[] = []
-
-const getAllUserSimpleByList = (): void => {
-  const urlApi = '/system/dept/list-all-user-simple'
-  const params = {}
-  request.get({ url: urlApi, params }).then((result) => {
-    sourceAllUserList = handleTree(
-      result.map((item) => {
-        return {
-          label: item['name'],
-          value: item['id'],
-          parentId: item['parentId'],
-          children: item['children']
-        }
-      }),
-      'value'
-    )
-    allUserList.list = sourceAllUserList
-    receiveUserId.value = $props.modelValue
-  })
-}
-const filterNodeMethod = (value, data) => {
-  if (!data) return
-  return data.label.includes(value)
-}
-getAllUserSimpleByList()
-watch(receiveUserId, (nVal: any) => {
-  $emit('update:modelValue', nVal)
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits<{ (e: 'update:modelValue', v: string): void }>()
+const receiveUserId = computed({
+  get: () => props.modelValue,
+  set: (nVal: string) => emit('update:modelValue', nVal)
 })
+const { data: allUserList } = useQuery(['list-all-user-simple'], getAllUserSimpleByList)
 </script>

client/src/views/OaSystem/projectCenter/projectDetail/components/xmxx/index.vue

@@ -35,21 +35,34 @@
                 <tr>
                   <td class="th">项目经理：</td>
                   <td>
-                    <UserOrgTree v-model="projectDetail['xmjlId']" :disabled="!editor" />
+                    <UserOrgTree
+                      class="form-item-disable-style"
+                      v-model="projectDetail['xmjlId']"
+                      :disabled="!editor"
+                    />
                   </td>
                   <td class="th">责任部门</td>
                   <td>
-                    <el-input v-model="projectDetail['zrbm']" :disabled="!editor" />
+                    <el-input
+                      class="form-item-disable-style"
+                      v-model="projectDetail['zrbm']"
+                      :disabled="!editor"
+                    />
                   </td>
                 </tr>
                 <tr>
                   <td class="th">项目类别：</td>
                   <td>
-                    <ProjectTypeTree v-model="projectDetail['projectTypeId']" :disabled="!editor" />
+                    <ProjectTypeTree
+                      class="form-item-disable-style"
+                      v-model="projectDetail['projectTypeId']"
+                      :disabled="!editor"
+                    />
                   </td>
                   <td class="th">立项时间：</td>
                   <td>
                     <el-date-picker
+                      class="form-item-disable-style"
                       style="width: 100%"
                       :disabled="true"
                       v-model="projectDetail['lxsj']"
@@ -62,17 +75,26 @@
                 <tr>
                   <td class="th">销售人员：</td>
                   <td>
-                    <UserOrgTree v-model="projectDetail['xsryId']" :disabled="!editor" />
+                    <UserOrgTree
+                      class="form-item-disable-style"
+                      v-model="projectDetail['xsryId']"
+                      :disabled="!editor"
+                    />
                   </td>
                   <td class="th">行政区：</td>
                   <td>
-                    <DistrictTree v-model="projectDetail['xzqdm']" :disabled="!editor" />
+                    <DistrictTree
+                      class="form-item-disable-style"
+                      v-model="projectDetail['xzqdm']"
+                      :disabled="!editor"
+                    />
                   </td>
                 </tr>
                 <tr>
                   <td class="th">行业：</td>
                   <td>
                     <el-select
+                      class="form-item-disable-style"
                       style="width: 100%"
                       v-model="projectDetail['hyId']"
                       placeholder="请选择行业"
@@ -88,17 +110,29 @@
                   </td>
                   <td class="th">预估金额（元）：</td>
                   <td>
-                    <el-input v-model="projectDetail['ygje']" :disabled="!editor" />
+                    <el-input
+                      class="form-item-disable-style"
+                      v-model="projectDetail['ygje']"
+                      :disabled="!editor"
+                    />
                   </td>
                 </tr>
                 <tr>
                   <td class="th">预估工期（天）：</td>
                   <td>
-                    <el-input v-model="projectDetail['yggq']" :disabled="!editor" />
+                    <el-input
+                      class="form-item-disable-style"
+                      v-model="projectDetail['yggq']"
+                      :disabled="!editor"
+                    />
                   </td>
                   <td class="th">归属公司：</td>
                   <td>
-                    <el-input v-model="projectDetail['belongCompanyname']" :disabled="!editor" />
+                    <el-input
+                      class="form-item-disable-style"
+                      v-model="projectDetail['belongCompanyname']"
+                      :disabled="!editor"
+                    />
                   </td>
                 </tr>
               </table>
@@ -143,21 +177,37 @@
                 <tr>
                   <td class="th">项目经理：</td>
                   <td>
-                    <UserOrgTree v-model="projectDetail['xmjlId']" :disabled="!editor" />
+                    <UserOrgTree
+                      class="form-item-disable-style"
+                      v-model="projectDetail['xmjlId']"
+                      :disabled="!editor"
+                    />
                   </td>
                   <td class="th">责任部门</td>
                   <td>
-                    <el-input v-model="projectDetail['zrbm']" :disabled="!editor" />
+                    <el-input
+                      class="form-item-disable-style"
+                      v-model="projectDetail['zrbm']"
+                      :disabled="!editor"
+                    />
                   </td>
                 </tr>
                 <tr>
                   <td class="th">项目编号：</td>
                   <td>
-                    <el-input v-model="projectDetail['yggq']" :disabled="!editor" />
+                    <el-input
+                      class="form-item-disable-style"
+                      v-model="projectDetail['xmbh']"
+                      :disabled="!editor"
+                    />
                   </td>
                   <td class="th">预估工期（天）：</td>
                   <td>
-                    <el-input v-model="projectDetail['yggq']" :disabled="!editor" />
+                    <el-input
+                      class="form-item-disable-style"
+                      v-model="projectDetail['yggq']"
+                      :disabled="!editor"
+                    />
                   </td>
                 </tr>
               </table>