|
@@ -6,16 +6,42 @@
|
|
|
* @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">
|
|
|
+ <el-table-column
|
|
|
+ v-for="({ props, label, type, width, align, children }, 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[`${props}_${type}`]"
|
|
|
+ v-model="scope.row[props]"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ />
|
|
|
+ <pre v-else>{{ scope.row[props] }}</pre>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ class="margin-top-10"
|
|
|
+ @click="handleEdit({ scope, type, props })"
|
|
|
+ >
|
|
|
+ {{ !scope.row[`${props}_${type}`] ? "编辑" : "完成" }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div v-else>{{ scope.row[props] }}</div>
|
|
|
+ </template>
|
|
|
+ <template v-if="children">
|
|
|
<el-table-column
|
|
|
- v-for="(
|
|
|
- { props, label, type, width, align, children }, index
|
|
|
- ) in config"
|
|
|
- :key="index"
|
|
|
- :prop="props"
|
|
|
- :width="width"
|
|
|
- :label="label"
|
|
|
- :align="align || 'center'"
|
|
|
+ v-for="({ props, label, width, align }, index) in children"
|
|
|
+ :key="index"
|
|
|
+ :prop="props"
|
|
|
+ :width="width"
|
|
|
+ :label="label"
|
|
|
+ :align="align || 'center'"
|
|
|
>
|
|
|
<template #default="scope">
|
|
|
<div v-if="type === 'edit'">
|
|
@@ -54,83 +80,97 @@
|
|
|
</el-table-column>
|
|
|
</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 }, index) in handleRow"
|
|
|
- :key="index"
|
|
|
- class="padding-right-5"
|
|
|
- >
|
|
|
- <el-popconfirm
|
|
|
- v-if="popconfirm"
|
|
|
- :title="`确定要${label}吗?`"
|
|
|
- >
|
|
|
- <el-button
|
|
|
- slot="reference"
|
|
|
- @click="handleClick(props, scope.row)"
|
|
|
- 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>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <span v-if="handleFormat(visible,scope.row)">
|
|
|
+ <el-popconfirm v-if="popconfirm" :title="`确定要${label}吗?`">
|
|
|
+ <el-button
|
|
|
+ slot="reference"
|
|
|
+ @click="handleClick(props, scope.row)"
|
|
|
+ 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: () => [],
|
|
|
+ },
|
|
|
+ loading: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ handleRow: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ computed_list() {
|
|
|
+ const object = {};
|
|
|
+ this.config
|
|
|
+ .filter(({ type }) => type === "edit")
|
|
|
+ .forEach(({ props, type }) => {
|
|
|
+ object[`${props}_${type}`] = false;
|
|
|
+ });
|
|
|
+ return this.list.map((element) => ({
|
|
|
+ ...element,
|
|
|
+ ...object,
|
|
|
+ }));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleFormat(params,data) {
|
|
|
+ let visible = true;
|
|
|
+ if (params) {
|
|
|
+ visible = false;
|
|
|
+ console.log(Object.keys(params));
|
|
|
+ Object.keys(params).forEach((element) => {
|
|
|
+ if (params[element].includes(data[element])) {
|
|
|
+ visible = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return visible;
|
|
|
},
|
|
|
- computed: {
|
|
|
- computed_list() {
|
|
|
- const object = {};
|
|
|
- this.config
|
|
|
- .filter(({ type }) => type === "edit")
|
|
|
- .forEach(({ props, type }) => {
|
|
|
- object[`${props}_${type}`] = false;
|
|
|
- });
|
|
|
- return this.list.map((element) => ({
|
|
|
- ...element,
|
|
|
- ...object,
|
|
|
- }));
|
|
|
- },
|
|
|
+ handleClick(props, row) {
|
|
|
+ this.$emit(props, row);
|
|
|
},
|
|
|
- methods: {
|
|
|
- handleClick(props, row) {
|
|
|
- this.$emit(props, row);
|
|
|
- },
|
|
|
- handleEdit({ scope, type, props }) {
|
|
|
- scope.row[`${props}_${type}`] = !scope.row[`${props}_${type}`];
|
|
|
- this.$emit(props, scope.row);
|
|
|
- },
|
|
|
+ handleEdit({ scope, type, props }) {
|
|
|
+ scope.row[`${props}_${type}`] = !scope.row[`${props}_${type}`];
|
|
|
+ this.$emit(props, scope.row);
|
|
|
},
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|