From e0430e0b25d759f6505a4e4542562a69c93b1db5 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 07 五月 2025 17:38:29 +0800
Subject: [PATCH] 客户档案页面开发
---
src/components/PIMTable/PIMTable.vue | 314 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 314 insertions(+), 0 deletions(-)
diff --git a/src/components/PIMTable/PIMTable.vue b/src/components/PIMTable/PIMTable.vue
new file mode 100644
index 0000000..747ef53
--- /dev/null
+++ b/src/components/PIMTable/PIMTable.vue
@@ -0,0 +1,314 @@
+<template>
+ <el-table ref="multipleTable" v-loading="tableLoading" :border="border" :data="tableData"
+ :header-cell-style="{ background: '#F0F1F5', color: '#333333' }" :height="height"
+ :highlight-current-row="highlightCurrentRow" :row-class-name="rowClassName" :row-style="rowStyle"
+ :row-key="rowKey" :span-method="spanMethod" stripe style="width: 100%" tooltip-effect="dark" @row-click="rowClick"
+ @current-change="currentChange" @selection-change="handleSelectionChange" class="lims-table">
+ <el-table-column align="center" type="selection" width="55" v-if="isSelection" />
+ <el-table-column align="center" label="搴忓彿" type="index" width="60" :index="indexMethod" />
+
+ <el-table-column v-for="(item, index) in column" :key="index" :column-key="item.columnKey"
+ :filter-method="item.filterHandler" :filter-multiple="item.filterMultiple" :filtered-value="item.filteredValue"
+ :filters="item.filters" :fixed="item.fixed" :label="item.label" :prop="item.prop"
+ :show-overflow-tooltip="!(item.dataType === 'action' || item.dataType === 'slot')"
+ :min-width="item.dataType == 'action' ? btnWidth : item.width"
+ :sortable="!!item.sortable" :type="item.type" :width="item.dataType == 'action' ? btnWidth : item.width" align="center">
+ <template v-if="item.hasOwnProperty('colunmTemplate')" #[item.colunmTemplate]="scope">
+ <slot v-if="item.theadSlot" :name="item.theadSlot" :index="scope.$index" :row="scope.row" />
+ </template>
+
+ <template #default="scope">
+ <!-- 鎻掓Ы -->
+ <div v-if="item.dataType == 'slot'">
+ <slot v-if="item.slot" :index="scope.$index" :name="item.slot" :row="scope.row" />
+ </div>
+ <!-- 杩涘害鏉� -->
+ <div v-else-if="item.dataType == 'progress'">
+ <el-progress :percentage="Number(scope.row[item.prop])" />
+ </div>
+ <!-- 鍥剧墖 -->
+ <div v-else-if="item.dataType == 'image'">
+ <img :src="javaApi + '/img/' + scope.row[item.prop]" alt="" 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)">
+ {{ 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>
+ </div>
+
+ <!-- 鎸夐挳 -->
+ <div v-else-if="item.dataType == 'action'"
+ :style="`min-width:${getWidth(item.operation, scope.row)}`">
+ <template v-for="(o, key) in item.operation" :key="key">
+ <el-button v-show="o.type != 'upload'" size="small" v-if="o.showHide ? o.showHide(scope.row) : true"
+ :disabled="o.disabled ? o.disabled(scope.row) : false" :plain="o.plain"
+ :style="{ color: (o.name === '鍒犻櫎' || o.name === 'delete') ? '#f56c6c' : o.color }" :type="typeFn(o.type, scope.row)"
+ @click="o.clickFun(scope.row)" :key="key">
+ {{ o.name }}
+ </el-button>
+ <el-upload :action="javaApi + o.url + '?id=' + (o.uploadIdFun ? o.uploadIdFun(scope.row) : scope.row.id)"
+ ref="uploadRef" size="small" :multiple="o.multiple ? o.multiple : false" :limit="1"
+ :disabled="o.disabled ? o.disabled(scope.row) : false"
+ :accept="o.accept ? o.accept : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'"
+ v-if="o.type == 'upload'" style="display: inline-block; width: 50px"
+ v-show="o.showHide ? o.showHide(scope.row) : true" :headers="uploadHeader"
+ :before-upload="(file) => beforeUpload(file, scope.$index)"
+ :on-change="(file, fileList) => handleChange(file, fileList, scope.$index)"
+ :on-error="(error, file, fileList) => onError(error, file, fileList, scope.$index)"
+ :on-success="(response, file, fileList) => handleSuccessUp(response, file, fileList, scope.$index)"
+ :on-exceed="onExceed" :show-file-list="false">
+ <el-button :size="o.size ? o.size : 'small'" type="text"
+ :disabled="o.disabled ? o.disabled(scope.row) : false">{{ o.name }}</el-button>
+ </el-upload>
+ </template>
+ </div>
+ <!-- 鍙偣鍑荤殑鏂囧瓧 -->
+ <div v-else-if="item.dataType == 'link'" class="cell link" style="width: 100%"
+ @click="goLink(scope.row, item.linkMethod)">
+ <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
+ </div>
+ <!-- 榛樿绾睍绀烘暟鎹� -->
+ <div v-else class="cell" style="width: 100%">
+ <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
+ <span v-else>{{ formatters(scope.row[item.prop], item.formatData) }}</span>
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ <pagination v-show="page.total > 0" :total="page.total" :layout="page.layout" :page="page.current"
+ :limit="page.size" @pagination="paginationSearch" />
+</template>
+
+<script setup>
+import pagination from './Pagination.vue'
+import { ref, inject, getCurrentInstance } from "vue"
+import { ElMessage } from "element-plus"
+
+// 鑾峰彇鍏ㄥ眬鐨� uploadHeader
+const { proxy } = getCurrentInstance()
+const uploadHeader = proxy.uploadHeader
+const javaApi = proxy.javaApi
+
+// Filters
+const typeFn = (val, row) => {
+ return typeof val === 'function' ? val(row) : val
+}
+
+const formatters = (val, format) => {
+ return typeof format === 'function' ? format(val) : val
+}
+
+// Props锛堜娇鐢� defineProps 鐨勯潪 TS 褰㈠紡锛�
+const props = defineProps({
+ isSelection: {
+ type: Boolean,
+ default: false
+ },
+ height: {
+ type: [String, null],
+ default: null
+ },
+ tableLoading: {
+ type: Boolean,
+ default: false
+ },
+ handleSelectionChange: {
+ type: Function,
+ default: () => {}
+ },
+ rowClick: {
+ type: Function,
+ default: () => {}
+ },
+ currentChange: {
+ type: Function,
+ default: () => {}
+ },
+ border: {
+ type: Boolean,
+ default: true
+ },
+ highlightCurrentRow: {
+ type: Boolean,
+ default: false
+ },
+ headerCellStyle: {
+ type: Object,
+ default: () => ({})
+ },
+ column: {
+ type: Array,
+ default: () => []
+ },
+ rowClassName: {
+ type: Function,
+ default: () => ''
+ },
+ rowStyle: {
+ type: [Object, Function],
+ default: () => ({})
+ },
+ tableData: {
+ type: Array,
+ default: () => []
+ },
+ rowKey: {
+ type: String,
+ default: undefined
+ },
+ page: {
+ type: Object,
+ default: () => ({
+ total: 0,
+ current: 0,
+ size: 10,
+ layout: 'total, sizes, prev, pager, next, jumper'
+ })
+ }
+})
+
+// Data
+const spanList = ref([])
+const btnWidth = ref('120px')
+const uploadRefs = ref([])
+const currentFiles = ref({})
+const uploadKeys = ref({})
+
+// 鍚堝苟鍗曞厓鏍兼柟娉�
+const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
+ if (column.find((m) => m.mergeCol)) {
+ let i = Number(rowIndex)
+ const obj = spanList.value.find((item, index) => {
+ i = index
+ return item.index == columnIndex
+ })
+ if (obj) {
+ const _row = spanList[i].arr[rowIndex]
+ const _col = _row > 0 ? 1 : 0
+ return {
+ rowspan: _row,
+ colspan: _col
+ }
+ }
+ }
+}
+
+const indexMethod = (index) => {
+ return (props.page.current - 1) * props.page.size + index + 1
+}
+
+const getWidth = (row, row0) => {
+ let count = 0
+ row.forEach((a) => {
+ if (a.showHide !== undefined && a.showHide(row0)) {
+ count += a.name.length
+ } else if (!a.showHide) {
+ count += a.name.length
+ }
+ })
+ btnWidth.value = count * 15 + 60 + "px"
+ return count * 15 + 60 + "px"
+}
+
+// 鐐瑰嚮 link 浜嬩欢
+const goLink = (row, linkMethod) => {
+ if (!linkMethod) {
+ return ElMessage.warning("璇烽厤缃� link 浜嬩欢")
+ }
+ const parentMethod = getParentMethod(linkMethod)
+ if (typeof parentMethod === 'function') {
+ parentMethod(row)
+ } else {
+ console.warn(`鐖剁粍浠朵腑鏈壘鍒版柟娉�: ${linkMethod}`)
+ }
+}
+
+// 鑾峰彇鐖剁粍浠舵柟娉曪紙绀轰緥瀹炵幇锛�
+const getParentMethod = (methodName) => {
+ const parentMethods = inject('parentMethods', {})
+ return parentMethods[methodName]
+}
+
+const dataTypeFn = (val, format) => {
+ if (typeof format === "function") {
+ return format(val)
+ } else return val
+}
+
+const formatType = (val, format) => {
+ if (typeof format === "function") {
+ return format(val)
+ } else return ""
+}
+
+// 鏂囦欢鍙樺寲澶勭悊
+const handleChange = (file, fileList, index) => {
+ if (fileList.length > 1) {
+ const earliestFile = fileList[0]
+ uploadRefs.value[index]?.handleRemove(earliestFile)
+ }
+ currentFiles.value[index] = file
+}
+
+// 鏂囦欢涓婁紶鍓嶆牎楠�
+const beforeUpload = (rawFile, index) => {
+ currentFiles.value[index] = {}
+ if (rawFile.size > 1024 * 1024 * 10) {
+ ElMessage.error('涓婁紶鏂囦欢涓嶈秴杩�10M')
+ return false
+ }
+ return true
+}
+
+// 涓婁紶鎴愬姛
+const handleSuccessUp = (response, file, fileList, index) => {
+ if (response.code == 200) {
+ if (uploadRefs[index]) {
+ uploadRefs[index].clearFiles()
+ }
+ currentFiles[index] = file
+ ElMessage.success("涓婁紶鎴愬姛")
+ resetUploadComponent(index)
+ } else {
+ ElMessage.error(response.message)
+ }
+}
+
+const resetUploadComponent = (index) => {
+ uploadKeys[index] = Date.now()
+}
+
+// 涓婁紶澶辫触
+const onError = (error, file, fileList, index) => {
+ ElMessage.error('鏂囦欢涓婁紶澶辫触锛岃閲嶈瘯')
+ if (uploadRefs.value[index]) {
+ uploadRefs.value[index].clearFiles()
+ }
+}
+
+// 鏂囦欢鏁伴噺瓒呴檺鎻愮ず
+const onExceed = () => {
+ ElMessage.warning('瓒呭嚭鏂囦欢涓暟')
+}
+
+const paginationSearch = ({ page, limit }) => {
+ emit("pagination", { page: page, limit: limit });
+}
+</script>
+
+<style scoped lang="scss">
+</style>
\ No newline at end of file
--
Gitblit v1.9.3