fix : 优化流程图样式及位置

2024-06-29 02:12:04 +08:00
parent 657b43f739
commit 0a6c37019a
22 changed files with 169 additions and 54 deletions
--- a/src/components/AttachmentUpload.vue
+++ b/src/components/AttachmentUpload.vue
@@ -1,8 +1,8 @@
 <template>
-  <el-form :model="formData" ref="applyForm" label-width="auto" :rules="rules" label-position="top">
+  <el-form :model="formData" ref="applyForm"  :rules="rules" :label-position="labelPosition">
    <el-row>
      <el-col :span="24">
-        <el-form-item :label="label" prop="attachment">
+        <el-form-item :label="label" prop="attachment" label-width="125">
          <template v-if="preview&&JSON.stringify(singleFile) !== '{}'&&JSON.stringify(singleFile)!=='null'">
            <el-button type="primary" link @click="handleDownload(singleFile)" style="font-size: 16px">
              {{ singleFile ? singleFile?.originalFileName : formData.singleFile?.originalFileName }}
@@ -12,22 +12,29 @@
          </template>
          <template
              v-else-if="!preview||JSON.stringify(singleFile) == '{}'||singleFile==null||formData.singleFile==null">
-            <file-upload @getFile="getAttachment" :showFileList="showFileList" :multiple="false" :maxSize="1"
-                         :disabled="isSingleFile" @delete="deleteAttachment"/>
+            <file-upload @getFile="getAttachment"  :multiple="false" :maxSize="1"  :showFileList="showFileList" @delete="deleteAttachment"
+                         :disabled="isSingleFile" />
+<!--           -->
+<!--            <fvTable style="width: 100%;max-height: 80px;" v-if="showSingleTable" :tableConfig="singleTableConfig"-->
+<!--                     :data="singleFileList" :isSettingCol="false" :pagination="false">-->
+<!--              <template #empty>-->
+<!--                <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>-->
+<!--              </template>-->
+<!--            </fvTable>-->
          </template>
        </el-form-item>
      </el-col>
      <el-col :span="24">
-        <el-form-item label="其他文件">
-          <el-card style="width: 100%;box-shadow: none">
-            <file-upload @getFile="getOtherFile"/>
+        <el-form-item label="其他文件" label-width="125">
+          <file-upload @getFile="getOtherFile"/>
+<!--          <el-card style="width: 100%;box-shadow: none">-->
            <fvTable style="width: 100%;max-height: 300px;" v-if="showTable" :tableConfig="tableConfig"
                     :data="allFileList" :isSettingCol="false" :pagination="false">
              <template #empty>
                <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
              </template>
            </fvTable>
-          </el-card>
+<!--          </el-card>-->
        </el-form-item>
      </el-col>
    </el-row>
@@ -50,12 +57,20 @@ const props = defineProps({
  },
  showTable: {
    type: Boolean,
-    default: true
+    default: false
+  },
+  showSingleTable: {
+    type: Boolean,
+    default: false
  },
  preview: {
    type: Boolean,
    default: false
  },
+  singleList: {
+    type: Array,
+    default: []
+  },
  otherFileList: {
    type: Array,
    default: []
@@ -63,6 +78,10 @@ const props = defineProps({
  formData: {
    type: Object,
    default: {}
+  },
+  labelPosition: {
+    type: String,
+    default:''
  }
 })
 const emit = defineEmits(["getAttachment", "getOtherFile"])
@@ -128,6 +147,68 @@ const tableConfig = reactive({
    }
  ]
 })
+const singleTableConfig = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: '80',
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+    },
+    {
+      prop: 'tag',
+      label: '标签',
+      align: 'center'
+    },
+    {
+      prop: 'size',
+      label: '文件大小',
+      align: 'center',
+      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        let btn = []
+        btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
+        // if (row.newFile) {
+        //   btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
+        // }
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        onClick={() => item.func()}
+                        link
+                    >
+                      {item.label}
+                    </el-button>
+                ))
+              }
+              {
+                row.newFile || props.preview || !props.preview ?
+                    <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
+                        // perm={['']}
+                                    onDelete={() => handleSingleDelete(row)}/>
+                    : ''
+              }
+            </div>
+        )
+      }
+    }
+  ]
+})
 const rules = reactive({
  attachment: [{required: true, message: '请上传附件', trigger: ['blur', 'change']}],
 })
@@ -135,9 +216,16 @@ const applyForm = ref()
 const singleFile = ref(props.formData.singleFile)
 const isSingleFile = ref(false)
 const allFileList = ref([])
+const singleFileList = ref([])
+if(props.formData.fileList !== null && props.formData.fileList.length > 0){
+  allFileList.value = props.formData.fileList
+}
 watch(() => props.showTable, (newVal) => {
  props.showTable = newVal
 }, {deep: true})
+watch(() => props.showSingleTable, (newVal) => {
+  props.showSingleTable = newVal
+}, {deep: true})
 watch(() => props.formData.fileList, (newVal) => {
  // console.log('newVal-fileList', newVal)
  if (props.preview) {
@@ -160,6 +248,10 @@ watch(() => props.otherFileList, (newVal) => {
    allFileList.value = newVal
  }
 }, {deep: true})
+watch(() => props.singleList, (newVal) => {
+  // console.log('singleFile', newVal)
+  singleFileList.value = newVal
+}, {deep: true})
 watch(() => props.formData.singleFile, (newVal) => {
  // console.log('singleFile', newVal)
  singleFile.value = newVal
@@ -167,7 +259,7 @@ watch(() => props.formData.singleFile, (newVal) => {
 watch(() => isSingleFile.value, (newVal) => {
  isSingleFile.value = newVal
 }, {deep: true})
-const handleDelete = (row) => {
+const handleDelete = (row,type) => {
  deleteFile(row.fileId).then(res => {
    ElNotification({
      title: '提示',
@@ -175,11 +267,20 @@ const handleDelete = (row) => {
      type: res.code === 1000 ? 'success' : 'error'
    })
    if (res.code === 1000) {
-      allFileList.value.splice(allFileList.value.findIndex((item) => item.id === row.fileId), 1);
+      if(type==='single'){
+        singleFileList.value.splice(singleFileList.value.findIndex((item) => item.id === row.fileId), 1);
+        isSingleFile.value = false
+      }else {
+        allFileList.value.splice(allFileList.value.findIndex((item) => item.id === row.fileId), 1);
+      }
    }
  });
 }
+const handleSingleDelete = (row) => {
+ handleDelete(row,'single')
+}
 const getAttachment = (val) => {
+  console.log('getAttachment',val)
  isSingleFile.value = true
  emit('getAttachment', val)
 }
--- a/src/components/DetailComponent/ApprovalDetail.vue
+++ b/src/components/DetailComponent/ApprovalDetail.vue
@@ -24,7 +24,7 @@
          <div class="base-title">流程图</div>
          <el-switch
              v-model="changeDiagram"
-              style="--el-switch-on-color: #13ce66; --el-switch-off-color:#BEA266"
+              style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
          />
        </div>
      </div>
--- a/src/components/DetailComponent/CollectionDetail.vue
+++ b/src/components/DetailComponent/CollectionDetail.vue
@@ -69,7 +69,7 @@
            <div class="base-title">流程图</div>
            <el-switch
                v-model="changeDiagram"
-                style="--el-switch-on-color: #13ce66; --el-switch-off-color:#BEA266"
+                style="--el-switch-on-color:#BEA266; --el-switch-off-color:#cecdcd"
            />
          </div>
        </div>
--- a/src/components/DetailComponent/ProjectApply.vue
+++ b/src/components/DetailComponent/ProjectApply.vue
@@ -29,7 +29,7 @@
            <div class="base-title">流程图</div>
            <el-switch
                v-model="changeDiagram"
-                style="--el-switch-on-color: #13ce66; --el-switch-off-color:#BEA266"
+                style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
            />
          </div>
        </div>
@@ -414,7 +414,6 @@ const init = async () => {
 watchEffect(() => {
  return Object.keys(props.formData).length && (localFormData.value = props.formData)
 })
-
 onMounted(async () => {
  await init()
 })
--- a/src/components/DetailComponent/SpecialFundDetail.vue
+++ b/src/components/DetailComponent/SpecialFundDetail.vue
@@ -70,7 +70,7 @@
            <div class="base-title">流程图</div>
            <el-switch
                v-model="changeDiagram"
-                style="--el-switch-on-color: #13ce66; --el-switch-off-color:#BEA266"
+                style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
            />
          </div>
        </div>
--- a/src/components/DetailComponent/SummaryDetail.vue
+++ b/src/components/DetailComponent/SummaryDetail.vue
@@ -166,7 +166,7 @@
            <div class="base-title">流程图</div>
            <el-switch
                v-model="changeDiagram"
-                style="--el-switch-on-color: #13ce66; --el-switch-off-color:#BEA266"
+                style="--el-switch-on-color:#BEA266 ; --el-switch-off-color:#cecdcd"
            />
          </div>
        </div>