From bc44c8e3c9d85691ce3fa73ef1300a6fae46e365 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期二, 18 三月 2025 19:07:08 +0800
Subject: [PATCH] Merge branch 'dev' of http://114.132.189.42:9002/r/center-lims-before-ruoyi into dev
---
src/components/Table/lims-table.vue | 590 +++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 438 insertions(+), 152 deletions(-)
diff --git a/src/components/Table/lims-table.vue b/src/components/Table/lims-table.vue
index d453b9e..e293a94 100644
--- a/src/components/Table/lims-table.vue
+++ b/src/components/Table/lims-table.vue
@@ -4,6 +4,8 @@
<el-table
ref="multipleTable"
v-loading="tableLoading"
+ element-loading-text="鍔犺浇涓�..."
+ element-loading-spinner="el-icon-loading"
:border="border"
:data="tableData"
:header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
@@ -12,171 +14,237 @@
:row-class-name="rowClassName"
:row-style="rowStyle"
:row-key="rowKey"
- stripe
+ :span-method="finalSpanMethod"
+ :stripe="stripe"
style="width: 100%"
tooltip-effect="dark"
@row-click="rowClick"
@current-change="currentChange"
@selection-change="handleSelectionChange"
+ class="lims-table"
>
- <template v-if="isSelection">
- <el-table-column type="selection" width="55" />
- </template>
- <template>
- <el-table-column align="center" label="搴忓彿" type="index" width="60" />
- </template>
+ <el-table-column
+ align="center"
+ type="selection"
+ width="55"
+ v-if="isSelection"
+ />
+ <el-table-column
+ align="center"
+ label="搴忓彿"
+ type="index"
+ width="60"
+ :index="indexMethod"
+ />
- <template v-for="(item, index) in column">
- <el-table-column
- :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"
- :min-width="item.minWidth"
- :prop="item.prop"
- :show-overflow-tooltip="item.showOverflowTooltip"
- :sortable="item.sortable ? true : false"
- :type="item.type"
- :width="item.width"
- align="center"
+ <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"
+ :min-width="item.minWidth"
+ :prop="item.prop"
+ :show-overflow-tooltip="
+ item.dataType === 'action' || item.dataType === 'slot' ? false : true
+ "
+ :sortable="item.sortable ? true : false"
+ :type="item.type"
+ align="center"
+ :width="item.dataType == 'action' ? btnWidth : item.width"
+ >
+ <!-- <div class="123" v-if="item.type == ''"> -->
+ <template
+ v-if="item.hasOwnProperty('colunmTemplate')"
+ :slot="item.colunmTemplate"
+ slot-scope="scope"
>
- <!-- <div class="123" v-if="item.type == ''"> -->
- <template
- v-if="item.hasOwnProperty('colunmTemplate')"
- :slot="item.colunmTemplate"
- slot-scope="scope"
- >
+ <slot
+ v-if="item.theadSlot"
+ :index="index"
+ :name="item.theadSlot"
+ :row="scope.row"
+ />
+ </template>
+
+ <template slot-scope="scope">
+ <!-- 鎻掓Ы -->
+ <div v-if="item.dataType == 'slot'">
<slot
- v-if="item.theadSlot"
- :index="index"
- :name="item.theadSlot"
+ v-if="item.slot"
+ :index="scope.$index"
+ :name="item.slot"
:row="scope.row"
/>
- </template>
+ </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>
- <template slot-scope="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>
-
- <!-- tag -->
- <div v-else-if="item.dataType == 'tag'">
- <el-tag
- v-if="
- typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
- 'string'
- "
- :title="scope.row[item.prop] | formatters(item.formatData)"
- :type="formatType(scope.row[item.prop], item.formatType)"
- >{{
- scope.row[item.prop] | formatters(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="scope.row[item.prop] | formatters(item.formatData)"
- :type="formatType(tag, item.formatType)"
- >{{
- item.tagGroup
+ <!-- tag -->
+ <div v-else-if="item.dataType == 'tag'">
+ <el-tag
+ v-if="
+ typeof dataTypeFn(scope.row[item.prop], item.formatData) ==
+ 'string'
+ "
+ :title="scope.row[item.prop] | formatters(item.formatData)"
+ :type="formatType(scope.row[item.prop], item.formatType)"
+ >{{ scope.row[item.prop] | formatters(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="scope.row[item.prop] | formatters(item.formatData)"
+ :type="formatType(tag, item.formatType)"
+ >{{
+ item.tagGroup
+ ? tag[item.tagGroup.label]
? tag[item.tagGroup.label]
- ? tag[item.tagGroup.label]
- : tag
: tag
- }}</el-tag
- >
- <el-tag
- v-else
- :title="scope.row[item.prop] | formatters(item.formatData)"
- :type="formatType(scope.row[item.prop], item.formatType)"
- >{{
- scope.row[item.prop] | formatters(item.formatData)
- }}</el-tag
- >
- </div>
+ : tag
+ }}</el-tag
+ >
+ <el-tag
+ v-else
+ :title="scope.row[item.prop] | formatters(item.formatData)"
+ :type="formatType(scope.row[item.prop], item.formatType)"
+ >{{ scope.row[item.prop] | formatters(item.formatData) }}</el-tag
+ >
+ </div>
- <!-- 鎸夐挳 -->
- <div v-else-if="item.dataType == 'action'">
- <template v-for="(o, key) in item.operation">
+ <!-- 鎸夐挳 -->
+ <div
+ v-else-if="item.dataType == 'action'"
+ :style="`width:${getWidth(item.operation, scope.row)}`"
+ >
+ <template v-for="(o, key) in item.operation">
+ <el-button
+ v-show="o.type != 'upload'"
+ size="mini"
+ v-if="o.showHide ? o.showHide(scope.row) : true"
+ :disabled="o.disabled ? o.disabled(scope.row) : false"
+ :icon="iconFn(o)"
+ :plain="o.plain"
+ :style="{ color: o.name === '鍒犻櫎' ? '#f56c6c' : o.color }"
+ :type="o.type | typeFn(scope.row)"
+ @click="o.clickFun(scope.row)"
+ :key="key"
+ >
+ {{ o.name }}
+ </el-button>
+ <el-upload
+ :action="javaApi + o.url"
+ size="mini"
+ ref="upload"
+ :multiple="o.multiple ? o.multiple : false"
+ :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' && o.url"
+ style="display: inline-block; width: 50px"
+ :data="o.data ? o.data(scope.row) : {}"
+ :before-upload="
+ o.beforeUpload ? o.beforeUpload(scope.row) : () => true
+ "
+ v-show="o.showHide ? o.showHide(scope.row) : true"
+ :headers="uploadHeader"
+ :on-error="onError"
+ :on-exceed="onExceed"
+ :on-success="handleSuccessUp"
+ :show-file-list="false"
+ :key="key"
+ >
<el-button
- v-if="o.type != 'upload'"
- v-show="o.showHide ? o.showHide(scope.row) : true"
+ :size="o.size ? o.size : 'small'"
+ type="text"
:disabled="o.disabled ? o.disabled(scope.row) : false"
- :icon="o.icon | iconFn(scope.row)"
- :plain="o.plain"
- :size="o.size"
- :style="{ color: o.color }"
- :type="o.type | typeFn(scope.row)"
- @click="o.clickFun(scope.row)"
+ >{{ o.name }}</el-button
>
- {{ o.name }}
- </el-button>
- <el-upload
- action="#"
- :on-change="
- (file, fileList) => o.clickFun(scope.row, file, fileList)
- "
- :multiple="o.multiple ? o.multiple : false"
- :limit="o.limit ? o.limit : 1"
+ </el-upload>
+ <el-upload
+ action="#"
+ :on-change="
+ (file, fileList) => o.clickFun(scope.row, file, fileList)
+ "
+ :multiple="o.multiple ? o.multiple : false"
+ :limit="o.limit ? o.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' && !o.url"
+ style="display: inline-block; width: 50px"
+ v-show="o.showHide ? o.showHide(scope.row) : true"
+ :auto-upload="false"
+ :on-exceed="onExceed"
+ :show-file-list="false"
+ :key="key"
+ >
+ <el-button
+ :size="o.size ? o.size : 'small'"
+ type="text"
: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"
- :auto-upload="false"
- :on-exceed="onExceed"
- :show-file-list="false"
+ >{{ o.name }}</el-button
>
- <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>
- <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
- <span v-else>{{
- scope.row[item.prop] | formatters(item.formatData)
- }}</span>
- </div>
- </template>
- </el-table-column>
- </template>
+ </el-upload>
+ </template>
+ </div>
+ <!-- 鍙偣鍑荤殑鏂囧瓧 -->
+ <div
+ v-else-if="item.dataType == 'link'"
+ class="cell"
+ style="width: 100%"
+ @click="goLink(scope.row, item.linkEvent)"
+ >
+ <span class="link" 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>{{
+ scope.row[item.prop] | formatters(item.formatData)
+ }}</span>
+ </div>
+ </template>
+ </el-table-column>
</el-table>
<pagination
+ v-if="page"
v-show="page.total > 0"
:total="page.total"
+ :layout="page.layout"
:page.sync="page.current"
:limit.sync="page.size"
@pagination="pagination"
+ style="background-color: #fff"
/>
</div>
</template>
@@ -234,13 +302,7 @@
export default {
name: "ZTTable",
filters: {
- iconFn(val, row) {
- if (typeof val === "function") {
- return val(row);
- } else return val;
- },
typeFn(val, row) {
- // console.log(val, row, '11111111');
if (typeof val === "function") {
return val(row);
} else return val;
@@ -257,9 +319,13 @@
},
},
props: {
+ parentSpanMethod: {
+ type: Function,
+ default: () => {},
+ },
isSelection: {
type: Boolean,
- default: false,
+ default: undefined,
},
height: {
type: String,
@@ -289,9 +355,13 @@
},
border: {
type: Boolean,
- default: false,
+ default: true,
},
highlightCurrentRow: {
+ type: Boolean,
+ default: false,
+ },
+ stripe: {
type: Boolean,
default: false,
},
@@ -312,8 +382,8 @@
default: () => {},
},
rowStyle: {
- type: Object || Function,
- default: () => {},
+ type: Function,
+ // default: () => { },
},
tableData: {
type: Array,
@@ -323,7 +393,7 @@
},
rowKey: {
type: String,
- default: undefined,
+ default: "id",
},
page: {
type: Object,
@@ -332,12 +402,73 @@
total: 0,
current: 0,
size: 10,
+ layout: "total, sizes, prev, pager, next, jumper",
};
},
},
},
-
+ data() {
+ return {
+ spanList: [],
+ btnWidth: "120px",
+ };
+ },
+ watch: {
+ // column(val) {
+ // this.doLayout();
+ // },
+ },
+ updated() {
+ this.$nextTick(() => {
+ this.$refs.multipleTable.doLayout();
+ });
+ },
+ computed: {
+ finalSpanMethod() {
+ if(this.parentSpanMethod) {
+ console.log('鐖剁粍浠剁殑鍚堝苟鏂规硶');
+ return this.parentSpanMethod;
+ }else{
+ console.log('瀛愮粍浠剁殑鍚堝苟鏂规硶');
+ return this.spanMethod;
+ }
+ },
+ },
+ mounted() {
+ this.calculateSpanInfo();
+ },
methods: {
+ doLayout() {
+ this.$nextTick(() => {
+ this.$refs.multipleTable && this.$refs.multipleTable.doLayout();
+ });
+ },
+ 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;
+ }
+ });
+ this.btnWidth = count * 15 + 70 + "px";
+ return count * 15 + 70 + "px";
+ },
+ iconFn(row) {
+ if (row.name === "缂栬緫" || row.name === "淇敼") {
+ return "el-icon-edit";
+ } else if (row.name === "鍒犻櫎") {
+ return "el-icon-delete";
+ } else if (row.name === "鏌ョ湅") {
+ return "el-icon-view";
+ } else {
+ return row.icon;
+ }
+ // if (typeof (val) === 'function') {
+ // return val(row);
+ // } else return val;
+ },
formatType(val, format) {
if (typeof format === "function") {
return format(val);
@@ -351,11 +482,122 @@
setCurrent(row) {
this.$refs.multipleTable.setCurrentRow();
},
+ handleSuccessUp(response, label) {
+ if (typeof label === "string") {
+ if (response.code == 200) {
+ this.upData[label] = response.data.url;
+ }
+ } else {
+ if (response.code == 200) {
+ this.$message.success("涓婁紶鎴愬姛");
+ }
+ }
+ this.$refs.upload.clearFiles();
+ },
+ onError(err, file, fileList) {
+ this.$message.error("涓婁紶澶辫触");
+ this.$refs.upload.clearFiles();
+ this.uploading = false;
+ },
onExceed() {
this.$message.warning("瓒呭嚭鏂囦欢涓暟");
},
- pagination(page, limit) {
- this.$emit("pagination", { pageNum: page, pageSize: limit });
+ pagination({ page, limit }) {
+ this.$emit("pagination", { page: page, limit: limit });
+ },
+ indexMethod(index) {
+ // return index * 2;
+ return (this.page.current - 1) * this.page.size + index + 1;
+ },
+ // 鐐瑰嚮鍗曞厓鏍糽ink浜嬩欢
+ goLink(row, linkEvent) {
+ if (!linkEvent) {
+ return this.$message.warning("璇烽厤缃甽ingk浜嬩欢");
+ }
+ console.log(linkEvent);
+ linkEvent.vueComponent[linkEvent.method](row);
+ },
+ // 鍚堝苟鍗曞厓鏍�
+ calculateSpanInfo() {
+ // 鍒濆鍖栨瘡鍒楃殑鍚堝苟淇℃伅
+ this.spanList = [];
+ this.column.forEach((m, i) => {
+ if (m.mergeCol) {
+ this.spanList.push({
+ arr: [],
+ position: 0,
+ name: m.prop,
+ index: i + 1,
+ });
+ }
+ });
+ this.spanList.forEach((item, i) => {
+ this.rowspan(
+ this.spanList[i].arr,
+ this.spanList[i].position,
+ item.name
+ );
+ });
+ },
+ rowspan(spanArr, position, spanName) {
+ this.tableData.forEach((item, index) => {
+ if (index === 0) {
+ spanArr.push(1);
+ position = 0;
+ } else {
+ if (
+ this.tableData[index][spanName] ===
+ this.tableData[index - 1][spanName]
+ ) {
+ spanArr[position] += 1;
+ spanArr.push(0);
+ } else {
+ spanArr.push(1);
+ position = index;
+ }
+ }
+ });
+ },
+ // 鍚堝苟鍗曞厓鏍�
+ spanMethod({ row, column, rowIndex, columnIndex }) {
+ // 涓�鑸殑鍚堝苟琛�
+ if (this.column.find((m) => m.mergeCol)) {
+ let i = null;
+ let obj = this.spanList.find((item, index) => {
+ i = index;
+ return item.index == columnIndex;
+ });
+ if (obj) {
+ const _row = this.spanList[i].arr[rowIndex];
+ const _col = _row > 0 ? 1 : 0;
+ return {
+ rowspan: _row,
+ colspan: _col,
+ };
+ }
+ }
+ // // 鐗规畩鐨勫悎骞惰
+ // if (
+ // this.data.spanConfig != undefined &&
+ // this.data.spanConfig.special &&
+ // this.data.spanConfig.special.main &&
+ // this.data.spanConfig.special.rows &&
+ // this.data.spanConfig.special.rows.length > 0
+ // ) {
+ // let i = null;
+ // let obj = this.data.spanConfig.special.rows.find((item, index) => {
+ // i = index;
+ // return item.index == columnIndex;
+ // });
+ // if (obj) {
+ // const _row = this.specialSpanList[i].arr[rowIndex];
+ // const _col = _row > 0 ? 1 : 0;
+ // return {
+ // rowspan: _row,
+ // colspan: _col,
+ // };
+ // }
+ // }
},
},
};
@@ -365,4 +607,48 @@
.el-table >>> .el-table__empty-text {
text-align: center;
}
+
+>>> .cell {
+ padding: 0 !important;
+}
+
+.cell {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-right: 4px !important;
+ padding-left: 10px !important;
+}
+
+.link {
+ color: rgb(64, 158, 255);
+ cursor: pointer;
+}
+
+>>> .el-table__body-wrapper::-webkit-scrollbar {
+ height: 14px;
+ /* 璁剧疆婊氬姩鏉″搴� */
+}
+</style>
+<style>
+.lims-table .highlight-warning-row-border td:first-child {
+ border-left: 4px solid #ffcd29;
+}
+
+.lims-table .highlight-warning-row-border td:last-child {
+ border-right: 4px solid #ffcd29;
+}
+
+/* .lims-table .highlight-danger-row-border td {
+ border-top: 2px solid red;
+ border-bottom: 2px solid red;
+ } */
+
+.lims-table .highlight-danger-row-border td:first-child {
+ border-left: 4px solid #f56c6c;
+}
+
+.lims-table .highlight-danger-row-border td:last-child {
+ border-right: 4px solid #f56c6c;
+}
</style>
--
Gitblit v1.9.3