:fire: 销售出路 新增应收 合同管理 附件 添加文件上传

buhuazhen

8 天以前 80fdc24e3aa75ad5368b533860769a1a1bd6c9b2

:fire: 销售出路 新增应收
       合同管理 附件
       添加文件上传

 src/api/personnelManagement/employeeRecord.js

@@ -15,4 +15,12 @@
        method: 'get',
        params: query,
    })
}
}

export function save(data){
    return request({
        url: '/staff/staffOnJob/save',
        method: 'post',
        data: data
    })
}

 src/components/FileUpload/SimpleMultiFileUpload.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,118 @@
<script setup>
import {computed, ref, reactive, defineEmits,watch} from "vue";
import {getToken} from "@/utils/auth.js";
import axios from "axios";
import {ElMessage} from "element-plus";

const emit = defineEmits(['update:fileList', 'onUpload',"update:ids"]);

const props = defineProps({
  action: {type: String, default: "/common/minioUploads"},
  fileList: {type: Array, default: () => []},
  statusType: {type: Number, default: 0}
})

const localFileList = ref([...props.fileList])


const headers = computed(() => ({Authorization: "Bearer " + getToken()}));
const uploadFileUrl = computed(() => import.meta.env.VITE_APP_BASE_API + props.action);

const handleChange = () => {
  emit('update:ids', localFileList.value.map(item => item.id))
  emit('update:fileList', localFileList.value)
  emit('onUpload', localFileList.value)
}
const handleUploadSuccess = (res, file) => {
  // console.log(res)
  localFileList.value.push(...res.data.map((it) => {
    return {
      id: it.id,
      url: it.downloadUrl,
      name: it.originalFilename,
      status: "success",
      uid: file.uid
    }
  }))
  handleChange()
}

const handleUploadPreview = (it) => {
  const link = document.createElement("a");
  if (it.url) {
    link.href = it.url
  } else {
    link.href = localFileList.value.find(fl => fl.uid === it.uid).url;
  }
  link.download = it.name;
  link.click();
}

const handleUploadRemove = (it) => {
  localFileList.value = localFileList.value.filter(f => f.uid !== it.uid);
  handleChange()
}

watch(
    () => props.fileList,
    (val) => {
      localFileList.value = [...val]
    },
    { immediate: true, deep: true }
)

// æ–‡ä»¶ä¸Šä¼ å¤„理
const UploadImage = (param) => {
  const formData = new FormData();
  formData.append("files", param.file);
  formData.append("type", props.statusType);
  axios.post(uploadFileUrl.value, formData, {
    headers: {
      "Content-Type": "multipart/form-data",
      ...headers.value,
    },
    onUploadProgress: (progressEvent) => {
      const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      param.onProgress({percent});
    },
  })
      .then((response) => {
        if (response.data.code === 200) {
          handleUploadSuccess(response.data, param.file);
          ElMessage.success("上传成功");
        } else {
          param.onError(new Error(response.data.msg));
          ElMessage.error(response.data.msg);
        }
      })
      .catch((error) => {
        param.onError(error);
      });
};

</script>

<template>
  <div class="upload-file">
    <el-upload
        class="upload-demo"
        drag
        :fileList="localFileList"
        :action="props.action"
        :headers="headers"
        :http-request="UploadImage"
        :on-success="handleUploadSuccess"
        :on-remove="handleUploadRemove"
        :on-preview="handleUploadPreview"
        multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
  </div>
</template>

<style scoped lang="scss">



</style>

 src/components/PIMTable/PIMTable.vue

@@ -40,7 +40,7 @@
      :fixed="item.fixed"
      :label="item.label"
      :prop="item.prop"
      show-overflow-tooltip
      :show-overflow-tooltip="item.dataType !== 'multiTagLink'"
      :align="item.align"
      :sortable="!!item.sortable"
      :type="item.type"
@@ -80,43 +80,22 @@
            style="width: 40px; height: 40px; margin-top: 10px"
          />
        </div>

        <!-- tag -->
        <div v-else-if="item.dataType == 'tag'">
          <el-tag
            v-if="
              typeof dataTypeFn(scope.row[item.prop], item.formatData) ===
              'string'
            "
            :title="formatters(scope.row[item.prop], item.formatData)"
            :type="formatType(scope.row[item.prop], item.formatType)"
        <div v-else-if="item.dataType === 'multiTagLink'">
          <el-tooltip
              v-for="(file, index) in dataTypeFnArray(scope.row[item.prop], item.formatData)"
              :key="index"
              :content="file.name"
              effect="dark"
              placement="top"
          >
            {{ formatters(scope.row[item.prop], item.formatData) }}
          </el-tag>

          <el-tag
            v-for="(tag, index) in dataTypeFn(
              scope.row[item.prop],
              item.formatData
            )"
            v-else-if="
              typeof dataTypeFn(scope.row[item.prop], item.formatData) ===
              'object'
            "
            :key="index"
            :title="formatters(scope.row[item.prop], item.formatData)"
            :type="formatType(tag, item.formatType)"
          >
            {{ item.tagGroup ? tag[item.tagGroup.label] ?? tag : tag }}
          </el-tag>

          <el-tag
            v-else
            :title="formatters(scope.row[item.prop], item.formatData)"
            :type="formatType(scope.row[item.prop], item.formatType)"
          >
            {{ formatters(scope.row[item.prop], item.formatData) }}
          </el-tag>
            <el-tag
                type="info"
                style="margin-right: 4px;margin-top: 4px; cursor: pointer;"
                @click="downloadFile(file)"
            >
              {{ truncateName(file.name, 5) }}
            </el-tag>
          </el-tooltip>
        </div>

        <!-- æŒ‰é’® -->
@@ -351,6 +330,29 @@
    return format(val);
  } else return val;
};
const dataTypeFnArray = (val, format) => {
  if (!val) return [];
  if (typeof format === "function") {
    return format(val);
  }
  // ä¿è¯è¿”回的是数组
  return Array.isArray(val) ? val : [];
};

const truncateName = (name, length = 5) => {
  if (!name) return '';
  return name.length > length ? name.slice(0, length) + '...' : name;
};


const downloadFile = (file) => {
  const link = document.createElement("a");
  link.href = file.url;
  // è®¾ç½®ä¸‹è½½æ–‡ä»¶åä¸º file.name
  link.download = file.name;
  link.click();
};


const formatType = (val, format) => {
  if (typeof format === "function") {

 src/plugins/download.js

@@ -3,6 +3,7 @@
import { saveAs } from 'file-saver'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import request from '@/utils/request'
import { blobValidate } from '@/utils/ruoyi'

const baseURL = import.meta.env.VITE_APP_BASE_API
@@ -77,3 +78,13 @@
  }
}


export function findFileListByIds(data){
  return request({
    url: "/common/findFileListByIds",
    method: "post",
    data: data
  })
}



 src/views/accountReceivableLedger/index.vue

@@ -131,6 +131,13 @@
    width:200
  },
  {
    label: "附件",
    prop: "attachFileList",
    width:220,
    dataType: "multiTagLink"
  }
  ,
  {
    label: "登记日期",
    prop: "createTime",
    width:300
@@ -180,6 +187,7 @@
    tableData.value = res.records;
        page.total = res.total;
  });
  tableLoading.value = false;
};
// å­è¡¨åˆè®¡æ–¹æ³•
const summarizeMainTable1 = (param) => {

 src/views/payable/components/PayableDialog.vue

@@ -150,8 +150,8 @@
  form.value.fileList.push(...res.data.map((it,index)=>{
    return {
      id:it.id,
      url:it.downloadUrl,
      name:it.originalFilename,
      url:it.url,
      name:it.name,
      status:"success",
      uid:file.uid
    }

 src/views/personnelManagement/contractManagement/components/filesDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,76 @@
<script setup>
import SimpleMultiFileUpload from "@/components/FileUpload/SimpleMultiFileUpload.vue"
import {ref, defineExpose} from "vue"
import {ElMessage, ElMessageBox} from "element-plus";
import {findFileListByIds} from "@/plugins/download.js"
import {save} from "@/api/personnelManagement/employeeRecord.js"

const ids = ref([])
const fileList = ref([])
const contract = ref({})
const openDialog = (row, type) => {
  dialogFormVisible.value = true;
  contract.value = row
  //查询出附件信息进行显示 row.attachUpload
  fileList.value = []
  if(row.attachUpload){
    findFileListByIds(row.attachUpload.split(",")).then(res => {
      fileList.value = res.data
      ids.value = fileList.value.map(it => it.id)
    })
  }
}



const closeDia = () => {
  emit('close')
  dialogFormVisible.value = false
};

const saveDia = async () => {
  // æäº¤ä¿å­˜
  await save({
    id: contract.value.id,
    attachUpload: ids.value.join(',')
  }).then(res => {
    if (res.code === 200){
      ElMessage.success("操作成功");
    }
  })
  closeDia()
}

const emit = defineEmits(['close'])
const dialogFormVisible = ref(false)
defineExpose({
  openDialog
})
</script>

<template>
  <div>
    <el-dialog
        v-model="dialogFormVisible"
        title="上传附件"
        width="50%"
        @close="closeDia"
    >
            <template #footer>
              <div class="dialog-footer">
              <el-button @click="closeDia">取消</el-button>
              <el-button @click="saveDia">保存</el-button>
              </div>
            </template>
          <SimpleMultiFileUpload
              :key="contract.id"
          v-model:ids="ids"
          v-model:file-list="fileList"
          />
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>

 src/views/personnelManagement/contractManagement/filesDia.vue

ÎļþÒÑɾ³ý

 src/views/personnelManagement/contractManagement/index.vue

@@ -65,7 +65,7 @@
        </div>
      </template>
    </el-dialog>
    <files-dia ref="filesDia"></files-dia>
    <files-dia ref="filesDia" @close="filesClose"></files-dia>
  </div>
</template>

@@ -78,7 +78,7 @@
import dayjs from "dayjs";
import PIMTable from "@/components/PIMTable/PIMTable.vue";
import { getToken } from "@/utils/auth.js";
import FilesDia from "./filesDia.vue";
import FilesDia from "./components/filesDia.vue";
const data = reactive({
  searchForm: {
    staffName: "",
@@ -250,18 +250,23 @@
  page.size = obj.limit;
  getList();
};
const getList = () => {

const getList = async () => {
  tableLoading.value = true;
  const params = { ...searchForm.value, ...page };
  params.entryDate = undefined
  staffOnJobListPage(params).then(res => {
    tableLoading.value = false;
    tableData.value = res.data.records
    page.total = res.data.total;
  }).catch(err => {
    tableLoading.value = false;
  })
  let res = await staffOnJobListPage(params)
  tableData.value = res.data.records
  page.total = res.data.total;
  tableLoading.value = false;

};


const filesClose = ()=>{
  getList()
}

// è¡¨æ ¼é€‰æ‹©æ•°æ®
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;

 src/views/salesOutbound/index.vue

@@ -166,6 +166,15 @@
              />
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="附件上传：" prop="receiptPaymentDate">
              <SimpleMultiFileUpload
                  style="width: 100%"
                  v-model:ids="ids"
                  v-model:file-list="fileList"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
@@ -180,6 +189,7 @@

<script setup>
import {ref, reactive, onMounted, nextTick} from "vue";
import SimpleMultiFileUpload from "@/components/FileUpload/SimpleMultiFileUpload.vue"
const { proxy } = getCurrentInstance()
const { receipt_payment_type } = proxy.useDict("receipt_payment_type");
import {Delete, Download, Plus} from "@element-plus/icons-vue";
@@ -199,6 +209,8 @@

const formDia = ref()
const activeTab = ref("out");
const ids = ref([])
const fileList = ref([])
// æ ‡ç­¾é¡µæ•°æ®
const tabs = reactive([
  { name: "out", label: "销售出库" },
@@ -342,6 +354,7 @@
const submitForm = () => {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      former.value.attachUpload = ids.value.join(",")
      receiptPaymentSaveOrUpdate(former.value).then((res) => {
        proxy.$modal.msgSuccess("提交成功");
        closeDia();