merge

src/components/common/table/fileName.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-input
+    v-model="fileName"
+    placeholder="请输入"
+    clearable
+    :disabled="disabled"
+    @change="changeFun"
+    @clear="clearFun"
+  >
+    <template v-if="fileSuffix" #append>.{{ fileSuffix }}</template>
+  </el-input>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+interface Props {
+  modelValue: string;
+  disabled: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'clear']);
+const fileName = ref('');
+const fileSuffix = ref('');
+
+watch(
+  () => props.modelValue,
+  (val: any) => {
+    fileName.value = val.split('.')[0];
+    fileSuffix.value = val.split('.')[1];
+  },
+  {
+    immediate: true,
+  }
+);
+
+const changeFun = () => {
+  let name = '';
+  if (fileSuffix.value) {
+    name = `${fileName.value}.${fileSuffix.value}`;
+  } else {
+    name = fileName.value;
+  }
+  emit('update:modelValue', name);
+  emit('change', name);
+};
+
+const clearFun = () => {
+  emit('clear');
+};
+</script>

src/components/common/table/formItem.vue

@@ -181,6 +181,14 @@
       @change="(val: any) => changeFun(item.key, val)"
       @clear="clearFun"
     />
+    <FileName
+      v-if="item.inputMode === 'fileName'"
+      :attrs="attrs"
+      v-model="formData[item.key]"
+      :disabled="attrs.disabled || (item.disabled && showDisabled)"
+      @change="(val: any) => changeFun(item.key, val)"
+      @clear="clearFun"
+    />
   </template>
   <slot
     v-if="item.inputMode === 'slot' && $slots[`form-${item.key}`]"
@@ -205,6 +213,7 @@ import ChoseFile from './choseFile.vue';
 import UserSelect from '@/components/common/userSelect/index.vue';
 import ProjectSelect from '@/components/common/projectSelect/index.vue';
 import ApproveList from '@/components/common/approveList/index.vue';
+import FileName from './fileName.vue';
 
 interface Props {
   item: any;

src/components/common/table/tableFormDia.vue

@@ -91,6 +91,7 @@
                   <el-option label="日期" value="date" />
                   <el-option label="日期范围" value="daterange" />
                   <el-option label="上传图片" value="uploadImg" />
+                  <el-option label="文件名称" value="fileName" />
                   <el-option label="选择文件" value="choseFile" />
                   <el-option label="人员" value="userSelect" />
                   <el-option label="项目名称" value="projectSelect" />