From 99b062eeca471bdcbfcacd88e308fab9972cd6ec Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期二, 19 八月 2025 14:21:33 +0800
Subject: [PATCH] 展示优化
---
src/components/SFtable/index.vue | 364 ++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 282 insertions(+), 82 deletions(-)
diff --git a/src/components/SFtable/index.vue b/src/components/SFtable/index.vue
index 4740111..85758a2 100644
--- a/src/components/SFtable/index.vue
+++ b/src/components/SFtable/index.vue
@@ -1,20 +1,82 @@
+<!-- 琛ㄦ牸缁勪欢灏佽 -->
<template>
- <el-table
- :data="currentList"
- style="width: 1158px"
- :header-cell-style="{
- background: '#f3f6fb',
- color: '#666',
- height: '42px',
- 'font-weight': 400,
- }"
- :highlight-current-row="true"
- empty-text="鏆傛棤鏁版嵁"
+ <el-table
+ ref="multipleTableson"
+ :height="heights"
+ :data="
+ currentList.filter(
+ (data) =>
+ !search || data.name.toLowerCase().includes(search.toLowerCase())
+ )
+ "
+ @selection-change="handleSelectionChange"
+ :header-cell-style="{
+ background: '#f3f6fb',
+ color: '#666',
+ height: '42px',
+ 'font-weight': 400,
+ }"
+ :highlight-current-row="true"
+ empty-text="鏆傛棤鏁版嵁"
+ >
+ <el-table-column
+ v-if="multiplechoice"
+ fixed="left"
+ type="selection"
+ width="50"
+ align="center"
+ />
+ <el-table-column
+ v-if="serialnumber"
+ label="搴忓彿"
+ align="center"
+ key="id"
+ prop="id"
+ />
+ <el-table-column
+ v-if="agenumber"
+ label="骞撮緞"
+ align="center"
+ key="age"
+ prop="age"
+ width="160"
>
- <el-table-column type="index" :index="indexMethod" label="搴忓彿" width="80">
+ <template slot-scope="scope">
+ <span v-if="scope.row.age"
+ >{{ scope.row.age }}{{ scope.row.ageUnit }}</span
+ ><span v-if="scope.row.age2"
+ >{{ scope.row.age2 }}{{ scope.row.ageUnit2 }}</span
+ >
+ </template>
+ </el-table-column>
+ <div v-for="(item, index) in tableLabel">
+ <el-table-column
+ v-if="item.label == '鍑洪櫌鏃ユ湡'"
+ :key="index"
+ :prop="item.prop"
+ :width="item.width"
+ :label="item.label"
+ :formatter="formatData"
+ >
+ <template slot-scope="scope">
+ <span>{{ parseTime(scope.row.endtime) }}</span>
+ </template>
</el-table-column>
<el-table-column
- v-for="(item, index) in tableLabel"
+ v-if="item.label == '鎬у埆'"
+ :key="index"
+ :prop="item.prop"
+ :width="item.width"
+ :label="item.label"
+ :formatter="formatData"
+ >
+ <template slot-scope="scope">
+ <span>{{ scope.row.sex == 1 ? "鐢�" : "濂�" }}</span>
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ v-if="item.label != '鎬у埆' && item.label != '鍑洪櫌鏃ユ湡'"
:key="index"
:prop="item.prop"
:width="item.width"
@@ -22,78 +84,216 @@
:formatter="formatData"
>
</el-table-column>
- <el-table-column label="鎿嶄綔" width="100">
- <template slot-scope="scope">
- <el-button type="text" @click.native="$emit('details', scope.row)"
- >鏌ョ湅璇︽儏</el-button
- >
- </template>
- </el-table-column>
- </el-table>
- </template>
-
- <script>
- import dayjs from "dayjs";
- export default {
- data() {
- return {};
+ </div>
+ <!-- <el-table-column
+ v-for="(item, index) in tableLabel"
+ :key="index"
+ :prop="item.prop"
+ :width="item.width"
+ :label="item.label"
+ :formatter="formatData"
+ >
+ </el-table-column> -->
+ <!-- <el-table-column
+ label="鏄惁鍙敤"
+ align="center"
+ key="isavailable"
+ prop="isavailable"
+ width="120"
+ >
+ <template slot-scope="scope">
+ <dict-tag :options="qyoptions" :value="scope.row.usestate" />
+ </template>
+ </el-table-column> -->
+ <el-table-column
+ v-if="center && !searchTrue"
+ label="鎿嶄綔"
+ fixed="right"
+ align="center"
+ width="120"
+ class-name="small-padding fixed-width"
+ >
+ <template slot-scope="scope">
+ <el-button
+ v-if="controlxz"
+ size="medium"
+ type="text"
+ @click.native="$emit('selectfn', scope.row, typeinfo)"
+ ><span class="button-zx"
+ ><i class="el-icon-s-promotion"></i>閫夋嫨</span
+ ></el-button
+ >
+ <el-button
+ v-if="controlsc"
+ size="medium"
+ type="text"
+ @click.native="$emit('details', scope.row, typeinfo)"
+ ><span style="color: red"
+ ><i class="el-icon-delete"></i>鍒犻櫎</span
+ ></el-button
+ >
+ </template>
+ </el-table-column>
+ <el-table-column
+ v-if="center && searchTrue"
+ label="鎿嶄綔"
+ fixed="right"
+ align="right"
+ width="200"
+ class-name="small-padding fixed-width"
+ >
+ <template slot="header" slot-scope="scope">
+ <el-input v-model="search" size="mini" placeholder="杈撳叆鎮ｈ�呭悕绉版悳绱�" />
+ </template>
+ <template slot-scope="scope">
+ <el-button
+ v-if="controlxz"
+ size="medium"
+ type="text"
+ @click.native="$emit('selectfn', scope.row, typeinfo)"
+ ><span class="button-zx"
+ ><i class="el-icon-s-promotion"></i>閫夋嫨</span
+ ></el-button
+ >
+ <el-button
+ v-if="controlsc"
+ size="medium"
+ type="text"
+ @click.native="$emit('details', scope.row, typeinfo)"
+ ><span style="color: red"
+ ><i class="el-icon-delete"></i>鍒犻櫎</span
+ ></el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import store from "@/store";
+export default {
+ data() {
+ return {
+ ids: [],
+ mode: [],
+ languagelist: [],
+ editabshape: [],
+ qyoptions: [],
+ precedencetype: [],
+ search: "",
+ };
+ },
+ props: {
+ currentList: {
+ type: Array,
+ required: true,
},
- props: {
- currentList: {
- type: Array,
- required: true,
- },
- tableLabel: {
- type: Array,
- default: () => [],
- },
- currentIndex: {
- type: Number,
- required: true,
- },
+ tableLabel: {
+ type: Array,
+ default: () => [],
},
- created() {},
-
- methods: {
- indexMethod(index) {
- return parseInt(this.currentIndex) - 9 + index;
- },
+ controlsc: {
+ type: Boolean,
+ default: true,
+ },
+ center: {
+ type: Boolean,
+ default: true,
+ },
+ controlxz: {
+ type: Boolean,
+ default: true,
+ },
+ multiplechoice: {
+ type: Boolean,
+ default: true,
+ },
+ serialnumber: {
+ type: Boolean,
+ default: true,
+ },
+ agenumber: {
+ type: Boolean,
+ default: false,
+ },
+ // 1妯℃澘鍒楄〃 2閫変腑鎮ｈ�� 3鎮ｈ�呭垪琛�
+ typeinfo: {
+ type: Number,
+ default: 1,
+ },
+ heights: {
+ type: Number,
+ default: 600,
+ },
+ searchTrue: {
+ type: Boolean,
+ default: false,
+ },
+ },
+ created() {
+ this.mode = store.getters.mode;
+ this.languagelist = store.getters.languagelist;
+ this.qyoptions = store.getters.usable;
+ this.precedencetype = store.getters.precedencetype;
+ this.editabshape = store.getters.editabshape;
+ },
+
+ methods: {
// 鏁版嵁杩囨护
- formatData(row, column, cellValue) {
- if (column.property === "createType") {
- if (cellValue === 1) {
- return "鑷姩";
- }
- return "鎵嬪姩";
+ formatData(row, column, cellValue) {
+ if (column.property === "createType") {
+ if (cellValue === 1) {
+ return "鑷姩";
}
- if (column.property === "createTime") {
- return dayjs(cellValue).format("YYYY.MM.DD HH:mm:ss");
+ return "鎵嬪姩";
+ }
+ if (
+ column.property === "createTime" ||
+ column.property === "inhosptime"
+ ) {
+ if (cellValue === null) {
+ return "";
}
- return cellValue;
- },
+ return dayjs(cellValue).format("YYYY-MM-DD ");
+ }
+ return cellValue;
},
- };
- </script>
-
- <style lang="scss">
- .el-table td,
- .el-table th.is-leaf {
- border-bottom: unset;
- }
- .el-table td,
- .el-table th {
- padding: 5px 0;
- }
- .el-table thead {
- font-weight: 400;
- color: #666;
- }
- .dialog-footer {
- width: 100%;
- padding: 10px 20px 20px;
- text-align: center !important;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- }
- </style>
-
\ No newline at end of file
+ // 澶氶�夋閫変腑鏁版嵁
+ handleSelectionChange(selection) {
+ console.log(selection);
+
+ this.$emit("handleSelectionChange", selection);
+ },
+ toggleRowSelection(row, selected) {
+ this.$refs.multipleTableson.toggleRowSelection(row, selected);
+ },
+ clearSelection() {
+ // 鍦ㄨ繖閲岀紪鍐欐竻闄ら�夋嫨鐨勯�昏緫
+ this.$refs.multipleTableson.clearSelection();
+ },
+ },
+};
+</script>
+
+<style lang="scss">
+.el-table td,
+.el-table th.is-leaf {
+ border-bottom: unset;
+}
+.el-table td,
+.el-table th {
+ padding: 5px 0;
+}
+.el-table thead {
+ font-weight: 400;
+ color: #666;
+}
+.dialog-footer {
+ width: 100%;
+ padding: 10px 20px 20px;
+ text-align: center !important;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+</style>
--
Gitblit v1.9.3