|
|
@@ -2,166 +2,166 @@
|
|
|
* @Author : yuanrunwei
|
|
|
* @Date : 2021-11-01 18:02:58
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
- * @LastEditTime: 2021-12-22 19:55:28
|
|
|
+ * @LastEditTime: 2022-01-06 12:02:24
|
|
|
* @FilePath : \spfm-market-front\src\pages\main\performance\components\table.vue
|
|
|
-->
|
|
|
<template>
|
|
|
- <el-table class="simple-table" :data="computed_list" v-loading="loading">
|
|
|
+ <el-table class="simple-table" :data="computed_list" v-loading="loading" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" v-if="multiple" />
|
|
|
+ <el-table-column
|
|
|
+ v-for="(
|
|
|
+ { props, label, type, width, align, children, dictionary }, index
|
|
|
+ ) in config"
|
|
|
+ :key="index"
|
|
|
+ :prop="props"
|
|
|
+ :width="width"
|
|
|
+ :label="label"
|
|
|
+ :align="align || 'center'"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <div v-if="type === 'edit'">
|
|
|
+ <el-input
|
|
|
+ v-if="scope.row[`edit`]"
|
|
|
+ v-model="scope.row[props]"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ @change="handleModify"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-else-if="type === 'textarea'">
|
|
|
+ <pre class="simple-table-break">{{ scope.row[props] }}</pre>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="type === 'date'">
|
|
|
+ <div>{{ $formatDate(scope.row[props], "YYYY-MM-DD") }}</div>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="type === 'click'">
|
|
|
+ <div
|
|
|
+ class="simple-table-click cursor-pointer"
|
|
|
+ @click="handleClick(props, scope.row)"
|
|
|
+ >
|
|
|
+ {{ scope.row[props] }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="type === 'dictionary'">
|
|
|
+ {{ dictionary[scope.row[props]] }}
|
|
|
+ </div>
|
|
|
+ <div v-else>{{ scope.row[props] }}</div>
|
|
|
+ </template>
|
|
|
+ <template v-if="children">
|
|
|
<el-table-column
|
|
|
- v-for="(
|
|
|
- { props, label, type, width, align, children, dictionary },
|
|
|
- index
|
|
|
- ) in config"
|
|
|
- :key="index"
|
|
|
- :prop="props"
|
|
|
- :width="width"
|
|
|
- :label="label"
|
|
|
- :align="align || 'center'"
|
|
|
+ v-for="({ props, label, width, align, type }, index) in children"
|
|
|
+ :key="index"
|
|
|
+ :prop="props"
|
|
|
+ :width="width"
|
|
|
+ :label="label"
|
|
|
+ :align="align || 'center'"
|
|
|
>
|
|
|
- <template #default="scope">
|
|
|
- <div v-if="type === 'edit'">
|
|
|
- <el-input
|
|
|
- v-if="scope.row[`edit`]"
|
|
|
- v-model="scope.row[props]"
|
|
|
- autosize
|
|
|
- type="textarea"
|
|
|
- @change="handleModify"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div v-else-if="type === 'textarea'">
|
|
|
- <pre class="simple-table-break">{{ scope.row[props] }}</pre>
|
|
|
- </div>
|
|
|
- <div v-else-if="type === 'date'">
|
|
|
- <div>{{ $formatDate(scope.row[props], "YYYY-MM-DD") }}</div>
|
|
|
- </div>
|
|
|
- <div v-else-if="type === 'click'">
|
|
|
- <div
|
|
|
- class="simple-table-click cursor-pointer"
|
|
|
- @click="handleClick(props, scope.row)"
|
|
|
- >
|
|
|
- {{ scope.row[props] }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else-if="type === 'dictionary'">
|
|
|
- {{ dictionary[scope.row[props]] }}
|
|
|
- </div>
|
|
|
- <div v-else>{{ scope.row[props] }}</div>
|
|
|
- </template>
|
|
|
- <template v-if="children">
|
|
|
- <el-table-column
|
|
|
- v-for="(
|
|
|
- { props, label, width, align, type }, index
|
|
|
- ) in children"
|
|
|
- :key="index"
|
|
|
- :prop="props"
|
|
|
- :width="width"
|
|
|
- :label="label"
|
|
|
- :align="align || 'center'"
|
|
|
- >
|
|
|
- <template #default="scope">
|
|
|
- <div v-if="type === 'edit'">
|
|
|
- <el-input
|
|
|
- v-model="scope.row[props]"
|
|
|
- @change="handleModify"
|
|
|
- autosize
|
|
|
- type="textarea"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div v-else>{{ scope.row[props] }}</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </template>
|
|
|
+ <template #default="scope">
|
|
|
+ <div v-if="type === 'edit'">
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row[props]"
|
|
|
+ @change="handleModify"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-else>{{ scope.row[props] }}</div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- v-if="handleRow.length"
|
|
|
- label="操作"
|
|
|
- :width="handleRow.length * 50"
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-if="handleRow.length"
|
|
|
+ label="操作"
|
|
|
+ :width="handleRow.length * 50"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span
|
|
|
+ v-for="({ label, props, popconfirm, visible }, index) in handleRow"
|
|
|
+ :key="index"
|
|
|
+ class="padding-right-5"
|
|
|
>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span
|
|
|
- v-for="(
|
|
|
- { label, props, popconfirm, visible }, index
|
|
|
- ) in handleRow"
|
|
|
- :key="index"
|
|
|
- class="padding-right-5"
|
|
|
- >
|
|
|
- <span v-if="handleFormat(visible, scope.row)">
|
|
|
- <el-popconfirm
|
|
|
- v-if="popconfirm"
|
|
|
- :title="`确定要${label}吗？`"
|
|
|
- @confirm="handleClick(props,scope.row)"
|
|
|
- @cancel="handleCancel"
|
|
|
- >
|
|
|
- <el-button
|
|
|
- slot="reference"
|
|
|
- type="text"
|
|
|
- size="small"
|
|
|
- >{{ label }}</el-button
|
|
|
- >
|
|
|
- </el-popconfirm>
|
|
|
- <el-button
|
|
|
- v-else
|
|
|
- @click="handleClick(props, scope.row)"
|
|
|
- type="text"
|
|
|
- size="small"
|
|
|
- >{{ label }}</el-button
|
|
|
- >
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <span v-if="handleFormat(visible, scope.row)">
|
|
|
+ <el-popconfirm
|
|
|
+ v-if="popconfirm"
|
|
|
+ :title="`确定要${label}吗？`"
|
|
|
+ @confirm="handleClick(props, scope.row)"
|
|
|
+ @cancel="handleCancel"
|
|
|
+ >
|
|
|
+ <el-button slot="reference" type="text" size="small">{{
|
|
|
+ label
|
|
|
+ }}</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ <el-button
|
|
|
+ v-else
|
|
|
+ @click="handleClick(props, scope.row)"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ >{{ label }}</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
- props: {
|
|
|
- list: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
- config: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
- loading: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- handleRow: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
+ props: {
|
|
|
+ list: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ config: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ multiple: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ loading: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ handleRow: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ computed_list() {
|
|
|
+ return this.list.map((element) => ({
|
|
|
+ ...element,
|
|
|
+ }));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleFormat(params, data) {
|
|
|
+ let visible = true;
|
|
|
+ if (params) {
|
|
|
+ visible = false;
|
|
|
+ Object.keys(params).forEach((element) => {
|
|
|
+ if (params[element].includes(data[element])) {
|
|
|
+ visible = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return visible;
|
|
|
+ },
|
|
|
+ handleClick(props, row) {
|
|
|
+ console.log("aaaaaaaaa");
|
|
|
+ this.$emit(props, row);
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ console.log("我被关闭了");
|
|
|
},
|
|
|
- computed: {
|
|
|
- computed_list() {
|
|
|
- return this.list.map((element) => ({
|
|
|
- ...element,
|
|
|
- }));
|
|
|
- },
|
|
|
+ handleSelectionChange(val){
|
|
|
+ this.$emit("selection",val)
|
|
|
},
|
|
|
- methods: {
|
|
|
- handleFormat(params, data) {
|
|
|
- let visible = true;
|
|
|
- if (params) {
|
|
|
- visible = false;
|
|
|
- Object.keys(params).forEach((element) => {
|
|
|
- if (params[element].includes(data[element])) {
|
|
|
- visible = true;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- return visible;
|
|
|
- },
|
|
|
- handleClick(props, row) {
|
|
|
- console.log('aaaaaaaaa')
|
|
|
- this.$emit(props, row);
|
|
|
- },
|
|
|
- handleCancel(){
|
|
|
- console.log('我被关闭了')
|
|
|
- },
|
|
|
- handleModify() {
|
|
|
- this.$emit("modify", this.computed_list);
|
|
|
- },
|
|
|
+ handleModify() {
|
|
|
+ this.$emit("modify", this.computed_list);
|
|
|
},
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
