!1 merge: upload和城市选择的重构

Merge pull request !1 from Zweihander/yx-dev-from-feature-project

src/components/UploadFile/src/UploadFile.vue

@@ -58,7 +58,7 @@
 import { propTypes } from '@/utils/propTypes'
 import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
 import { isString } from '@/utils/is'
-import { useUpload } from '@/components/UploadFile/src/useUpload'
+import { useUpload, ResponseFile } from '@/components/UploadFile/src/useUpload'
 import { UploadFile } from 'element-plus/es/components/upload/src/upload'
 
 defineOptions({ name: 'UploadFile' })
@@ -67,7 +67,7 @@ const message = useMessage() // 消息弹窗
 const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
-  modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
+  modelValue: propTypes.oneOfType<ResponseFile[]>([]).isRequired,
   fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg']
   fileSize: propTypes.number.def(5), // 大小限制(MB)
   limit: propTypes.number.def(5), // 数量限制
@@ -121,7 +121,7 @@ const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => {
   // 删除自身
   const index = fileList.value.findIndex((item) => item.response?.data === res.data)
   fileList.value.splice(index, 1)
-  uploadList.value.push({ name: res.data, url: res.data })
+  uploadList.value.push({ name: res.data.name ?? res.data.url, url: res.data.url })
   if (uploadList.value.length == uploadNumber.value) {
     fileList.value.push(...uploadList.value)
     uploadList.value = []
@@ -152,35 +152,23 @@ const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
 // 监听模型绑定值变动
 watch(
   () => props.modelValue,
-  (val: string | string[]) => {
+  (val: ResponseFile[]) => {
     if (!val) {
       fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
       return
     }
 
-    fileList.value = [] // 保障数据为空
-    // 情况1：字符串
-    if (isString(val)) {
-      fileList.value.push(
-        ...val.split(',').map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url }))
-      )
-      return
-    }
-    // 情况2：数组
-    fileList.value.push(
-      ...(val as string[]).map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url }))
-    )
+    fileList.value = val.map(({ name, url }) => ({
+      name: name ?? url.substring(url.lastIndexOf('/') + 1),
+      url
+    }))
   },
   { immediate: true, deep: true }
 )
 // 发送文件链接列表更新
 const emitUpdateModelValue = () => {
-  // 情况1：数组结果
-  let result: string | string[] = fileList.value.map((file) => file.url!)
-  // 情况2：逗号分隔的字符串
-  if (props.limit === 1 || isString(props.modelValue)) {
-    result = result.join(',')
-  }
+  const result = fileList.value.map(({ name, url }) => ({ name, url }))
+
   emit('update:modelValue', result)
 }
 </script>

src/components/UploadFile/src/UploadImg.vue

@@ -118,7 +118,7 @@ const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
 // 图片上传成功提示
 const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => {
   message.success('上传成功')
-  emit('update:modelValue', res.data)
+  emit('update:modelValue', res.data.url)
 }
 
 // 图片上传错误提示

src/components/UploadFile/src/UploadImgs.vue

@@ -51,7 +51,7 @@ import type { UploadFile, UploadProps, UploadUserFile } from 'element-plus'
 import { ElNotification } from 'element-plus'
 
 import { propTypes } from '@/utils/propTypes'
-import { useUpload } from '@/components/UploadFile/src/useUpload'
+import { useUpload, ResponseFile } from '@/components/UploadFile/src/useUpload'
 
 defineOptions({ name: 'UploadImgs' })
 
@@ -70,7 +70,7 @@ type FileTypes =
   | 'image/x-icon'
 
 const props = defineProps({
-  modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
+  modelValue: propTypes.oneOfType<ResponseFile[]>([]).isRequired,
   drag: propTypes.bool.def(true), // 是否支持拖拽上传 ==> 非必传（默认为 true）
   disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传（默认为 false）
   limit: propTypes.number.def(5), // 最大图片上传数 ==> 非必传（默认为 5张）
@@ -111,7 +111,7 @@ const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
 
 // 图片上传成功
 interface UploadEmits {
-  (e: 'update:modelValue', value: string[]): void
+  (e: 'update:modelValue', value: ResponseFile[]): void
 }
 
 const emit = defineEmits<UploadEmits>()
@@ -120,7 +120,7 @@ const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => {
   // 删除自身
   const index = fileList.value.findIndex((item) => item.response?.data === res.data)
   fileList.value.splice(index, 1)
-  uploadList.value.push({ name: res.data, url: res.data })
+  uploadList.value.push({ name: res.data.name ?? res.data.url, url: res.data.url })
   if (uploadList.value.length == uploadNumber.value) {
     fileList.value.push(...uploadList.value)
     uploadList.value = []
@@ -132,22 +132,22 @@ const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => {
 // 监听模型绑定值变动
 watch(
   () => props.modelValue,
-  (val: string | string[]) => {
+  (val: ResponseFile[]) => {
     if (!val) {
       fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
       return
     }
 
-    fileList.value = [] // 保障数据为空
-    fileList.value.push(
-      ...(val as string[]).map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url }))
-    )
+    fileList.value = val.map(({ name, url }) => ({
+      name: name ?? url.substring(url.lastIndexOf('/') + 1),
+      url
+    }))
   },
   { immediate: true, deep: true }
 )
 // 发送图片链接列表更新
 const emitUpdateModelValue = () => {
-  let result: string[] = fileList.value.map((file) => file.url!)
+  let result: ResponseFile[] = fileList.value.map(({ name, url }) => ({ name, url: url! }))
   emit('update:modelValue', result)
 }
 // 删除图片
@@ -157,7 +157,7 @@ const handleRemove = (uploadFile: UploadFile) => {
   )
   emit(
     'update:modelValue',
-    fileList.value.map((file) => file.url!)
+    fileList.value.map(({ name, url }) => ({ name, url: url! }))
   )
 }
 

src/components/UploadFile/src/useUpload.ts

@@ -3,6 +3,11 @@ import CryptoJS from 'crypto-js'
 import { UploadRawFile, UploadRequestOptions } from 'element-plus/es/components/upload/src/upload'
 import axios from 'axios'
 
+export type ResponseFile = {
+  name: string
+  url: string
+}
+
 export const useUpload = () => {
   // 后端上传地址
   const uploadUrl = import.meta.env.VITE_UPLOAD_URL
@@ -31,7 +36,7 @@ export const useUpload = () => {
       // 模式二：后端上传
       // 重写 el-upload httpRequest 文件上传成功会走成功的钩子，失败走失败的钩子
       return new Promise((resolve, reject) => {
-        FileApi.updateFile({ file: options.file })
+        FileApi.updateFileEx({ file: options.file })
           .then((res) => {
             if (res.code === 0) {
               resolve(res)

src/views/pms/project/ProjectForm.vue

@@ -49,31 +49,39 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="省份" prop="provinceId">
-            <el-cascader
-              v-model="formData.provinceId"
-              :options="areaList"
-              :props="props1"
-              class="w-1/1"
+            <el-select
               clearable
               filterable
               placeholder="请选择省份"
+              v-model="formData.provinceId"
+              @change="onProvinceChange"
               :disabled="formType !== 'create'"
-            />
+            >
+              <el-option
+                v-for="item in areaList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="城市" prop="cityId">
-            <el-cascader
-              v-model="formData.cityId"
-              :options="areaList"
-              :props="props1"
-              :show-all-levels="false"
-              class="w-1/1"
+            <el-select
               clearable
               filterable
               placeholder="请选择城市"
+              v-model="formData.cityId"
               :disabled="formType !== 'create'"
-            />
+            >
+              <el-option
+                v-for="item in cityList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -271,6 +279,7 @@ import { useUserStore } from '@/store/modules/user'
 import { CustomerCompanyApi, CustomerCompanyVO } from '@/api/cms/customerCompany'
 import * as DeptApi from '@/api/system/dept'
 import {defaultProps, handleTree} from "@/utils/tree";
+import { log } from 'console'
 
 /** 项目基本信息 表单 */
 defineOptions({ name: 'ProjectForm' })
@@ -282,6 +291,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const areaList = ref([]) // 地区列表
+const cityList = ref([]); // 城市options
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 const customerCompanyOptions = ref<CustomerCompanyVO[]>([]) //客户公司列表
@@ -427,4 +437,10 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+// 省份更新时，刷新城市选项
+const onProvinceChange = (value: number)=>{
+  formData.value.cityId = undefined;
+  cityList.value = (areaList.value.find(({id})=>id===value) as any)?.children ?? [];
+}
 </script>

src/views/pms/project/bpm/ProjectBpmCreate.vue

@@ -35,32 +35,40 @@
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="省份" prop="provinceId">
-          <el-cascader
-            v-model="formData.provinceId"
-            :options="areaList"
-            :props="props"
-            class="w-1/1"
-            clearable
-            filterable
-            placeholder="请选择省份"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="城市" prop="cityId">
-          <el-cascader
-            v-model="formData.cityId"
-            :options="areaList"
-            :props="props"
-            :show-all-levels="false"
-            class="w-1/1"
-            clearable
-            filterable
-            placeholder="请选择城市"
-          />
-        </el-form-item>
-      </el-col>
+          <el-form-item label="省份" prop="provinceId">
+            <el-select
+              clearable
+              filterable
+              placeholder="请选择省份"
+              v-model="formData.provinceId"
+              @change="onProvinceChange"
+            >
+              <el-option
+                v-for="item in areaList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="城市" prop="cityId">
+            <el-select
+              clearable
+              filterable
+              placeholder="请选择城市"
+              v-model="formData.cityId"
+            >
+              <el-option
+                v-for="item in cityList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
       <el-col :span="12">
         <el-form-item label="预计金额(万)" prop="contractAmount" :label-width="102">
           <el-input v-model="formData.contractAmount" placeholder="请输入预计合同金额" />
@@ -309,6 +317,7 @@ const formRef = ref() // 表单 Ref
 const processDefineKey = 'pms_project_init' // 流程定义 Key
 const userList = ref<any[]>([]) // 用户列表
 const areaList = ref([]) // 地区列表
+const cityList = ref([]); // 城市options
 const customerCompanyOptions = ref<CustomerCompanyVO[]>([]) //客户公司列表
 const deptOptions = ref<any[]>([]) // 部门树形结构
 
@@ -354,4 +363,10 @@ onMounted(async () => {
   // 客户公司列表
   customerCompanyOptions.value = await CustomerCompanyApi.getCustomerCompanyList()
 })
+
+// 省份更新时，刷新城市选项
+const onProvinceChange = (value: number)=>{
+  formData.value.cityId = undefined;
+  cityList.value = (areaList.value.find(({id})=>id===value) as any)?.children ?? [];
+}
 </script>