|
|
@@ -16,44 +16,47 @@
|
|
|
class="j-table-force-nowrap"
|
|
|
size="middle"
|
|
|
>
|
|
|
- <template v-for="col in ['name', 'description', 'timeDesc', 'proportion']" #[col]="text, record, index">
|
|
|
- <div :key="col">
|
|
|
- <a-input v-if="record.editable" style="margin: -5px 0" :value="text" @change="(e) => handleChange(e.target.value, record.key, col)" />
|
|
|
- <template v-else>
|
|
|
- {{ text }}
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #proportionTitle>
|
|
|
- <span
|
|
|
- >权重
|
|
|
- <a-tooltip placement="top">
|
|
|
- <template #title>
|
|
|
- <span>权重之和应为100</span>
|
|
|
+ <template #bodyCell="{ column, record, index, text }">
|
|
|
+ <template v-if="['name', 'description', 'timeDesc', 'proportion'].includes(column.dataIndex)">
|
|
|
+ <div>
|
|
|
+ <a-input
|
|
|
+ v-if="editableData[record.key]"
|
|
|
+ style="margin: -5px 0"
|
|
|
+ v-model:value="editableData[record.key][column.dataIndex]"
|
|
|
+ @change="(e) => handleChange(e.target.value, record.key, column)"
|
|
|
+ />
|
|
|
+ <template v-else>
|
|
|
+ {{ text }}
|
|
|
</template>
|
|
|
- <a-icon type="question-circle" />
|
|
|
- </a-tooltip>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- <template #id="text, record, index">
|
|
|
- <a-tag color="pink" @click="up(record, index)" style="cursor: pointer" :class="index == 0 ? 'disabled' : ''">
|
|
|
- <a-icon type="arrow-up" />
|
|
|
- </a-tag>
|
|
|
- <a-tag color="blue" @click="down(record, index)" style="cursor: pointer" :class="index == data.length - 1 ? 'disabled' : ''">
|
|
|
- <a-icon type="arrow-down" />
|
|
|
- </a-tag>
|
|
|
- </template>
|
|
|
- <template #action="text, record, index">
|
|
|
- <div class="editable-row-operations">
|
|
|
- <span v-if="record.editable">
|
|
|
- <a @click="() => save(record.key)">保存</a>
|
|
|
- </span>
|
|
|
- <span v-else>
|
|
|
- <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
|
|
|
- <a-divider type="vertical" />
|
|
|
- <a :disabled="editingKey !== ''" @click="() => deleteRow(index)">删除</a>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="column.dataIndex === 'id'">
|
|
|
+ <a-tag color="pink" @click="up(record, index)" style="cursor: pointer" :class="index == 0 ? 'disabled' : ''">
|
|
|
+ <a-icon type="arrow-up" />
|
|
|
+ </a-tag>
|
|
|
+ <a-tag color="blue" @click="down(record, index)" style="cursor: pointer" :class="index == data.length - 1 ? 'disabled' : ''">
|
|
|
+ <a-icon type="arrow-down" />
|
|
|
+ </a-tag>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="column.dataIndex === 'action'">
|
|
|
+ <div class="editable-row-operations">
|
|
|
+ <span v-if="editableData[record.key]">
|
|
|
+ <a @click="() => save(record.key)" style="margin-right: 10px">保存</a>
|
|
|
+ <a-popconfirm title="确定取消吗?" @confirm="cancel(record.key)">
|
|
|
+ <a>取消</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </span>
|
|
|
+ <span v-else>
|
|
|
+ <a v-if="editableData[record.key]" disabled @click="() => edit(record.key)">编辑</a>
|
|
|
+ <a v-else @click="() => edit(record.key)">编辑</a>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <a v-if="editableData[record.key]" disabled @click="() => deleteRow(index)">删除</a>
|
|
|
+ <a v-else @click="() => deleteRow(index)">删除</a>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
</a-table>
|
|
|
</div>
|
|
|
@@ -61,8 +64,10 @@
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { getAction, postAction } from '/@/api/manage/manage';
|
|
|
- import { reactive, ref } from 'vue';
|
|
|
+ import { reactive, ref, UnwrapRef } from 'vue';
|
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
|
+ import { cloneDeep } from 'lodash-es';
|
|
|
+
|
|
|
const columns = [
|
|
|
{
|
|
|
title: '节点名称',
|
|
|
@@ -80,6 +85,7 @@
|
|
|
scopedSlots: { customRender: 'timeDesc' },
|
|
|
},
|
|
|
{
|
|
|
+ title: '权重',
|
|
|
dataIndex: 'proportion',
|
|
|
scopedSlots: { customRender: 'proportion', title: 'proportionTitle' },
|
|
|
},
|
|
|
@@ -95,17 +101,21 @@
|
|
|
},
|
|
|
];
|
|
|
|
|
|
- let data = reactive([{}]);
|
|
|
- const editingKey = ref('');
|
|
|
+ let data = ref([{}]);
|
|
|
+
|
|
|
+ const editableData: UnwrapRef<Record<string, {}>> = reactive({});
|
|
|
+
|
|
|
const hostId = ref('');
|
|
|
const tableLoading = ref(false);
|
|
|
const loading = ref(false);
|
|
|
+ const url = ref('');
|
|
|
let record = reactive({});
|
|
|
let cacheData = reactive([{}]);
|
|
|
|
|
|
const { createMessage } = useMessage();
|
|
|
+
|
|
|
function submitAll() {
|
|
|
- let d = data;
|
|
|
+ let d = data.value;
|
|
|
let proportion = 0;
|
|
|
for (let i in d) {
|
|
|
proportion += parseInt(d[i].proportion);
|
|
|
@@ -132,7 +142,7 @@
|
|
|
});
|
|
|
}
|
|
|
function addNew() {
|
|
|
- data.push({
|
|
|
+ data.value.push({
|
|
|
createTime: null,
|
|
|
delFlag: 0,
|
|
|
description: '',
|
|
|
@@ -147,88 +157,108 @@
|
|
|
status: null,
|
|
|
timeDesc: null,
|
|
|
type: 1,
|
|
|
- key: data.length,
|
|
|
+ key: data.value.length,
|
|
|
});
|
|
|
- cacheData = data;
|
|
|
+ cacheData = data.value;
|
|
|
}
|
|
|
//排序
|
|
|
function up(r, i) {
|
|
|
if (i == 0) {
|
|
|
return;
|
|
|
}
|
|
|
- data.splice(i - 1, 0, data[i]);
|
|
|
- data.splice(i + 1, 1);
|
|
|
+ data.value.splice(i - 1, 0, data[i]);
|
|
|
+ data.value.splice(i + 1, 1);
|
|
|
}
|
|
|
function down(r, i) {
|
|
|
- if (i == data.length - 1) {
|
|
|
+ if (i == data.value.length - 1) {
|
|
|
return;
|
|
|
}
|
|
|
- data.splice(i + 2, 0, data[i]);
|
|
|
- data.splice(i, 1);
|
|
|
+ data.value.splice(i + 2, 0, data[i]);
|
|
|
+ data.value.splice(i, 1);
|
|
|
}
|
|
|
function deleteRow(i) {
|
|
|
- data.splice(i, 1);
|
|
|
+ data.value.splice(i, 1);
|
|
|
}
|
|
|
function onClose() {
|
|
|
- data = [];
|
|
|
+ data.value = [];
|
|
|
}
|
|
|
function init(r, t) {
|
|
|
record = r;
|
|
|
if (t == 'seo') {
|
|
|
- url = '/adweb/executeNode/querySEOTemplateFlow?planId=' + r.id;
|
|
|
+ url.value = '/adweb/executeNode/querySEOTemplateFlow?planId=' + r.id;
|
|
|
+ } else if (t == 'enquiry') {
|
|
|
+ url.value = '/adweb/executeNode/queryEnquiryVerifyTemplateFlow';
|
|
|
} else {
|
|
|
- url = '/adweb/executeNode/querySiteBuildTemplateFlow';
|
|
|
+ url.value = '/adweb/executeNode/querySiteBuildTemplateFlow';
|
|
|
}
|
|
|
showStep();
|
|
|
}
|
|
|
function showStep() {
|
|
|
- let that = this;
|
|
|
- that.tableLoading = true;
|
|
|
- getAction(that.url)
|
|
|
+ tableLoading.value = true;
|
|
|
+
|
|
|
+ getAction(url.value, {})
|
|
|
.then((res) => {
|
|
|
- that.tableLoading = false;
|
|
|
+ tableLoading.value = false;
|
|
|
if (res.success) {
|
|
|
res.result.map((item, index) => {
|
|
|
- that.data.push(Object.assign({}, item, { key: index }));
|
|
|
- cacheData = data;
|
|
|
+ data.value.push(Object.assign({}, item, { key: index }));
|
|
|
+ cacheData = data.value;
|
|
|
hostId.value = res.result[0].hostId;
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.catch((e) => {
|
|
|
- createMessage.warn('获取数据失败！');
|
|
|
+ createMessage.warn('获取数据失败！', e.message());
|
|
|
});
|
|
|
}
|
|
|
function handleChange(value, key, column) {
|
|
|
- const newData = [...data];
|
|
|
+ const newData = [...data.value];
|
|
|
const target = newData.filter((item) => key === item.key)[0];
|
|
|
+
|
|
|
if (target) {
|
|
|
target[column] = value;
|
|
|
- data = newData;
|
|
|
- }
|
|
|
- }
|
|
|
- function edit(key) {
|
|
|
- const newData = [...data];
|
|
|
- const target = newData.filter((item) => key === item.key)[0];
|
|
|
- editingKey.value = key;
|
|
|
- if (target) {
|
|
|
- target.editable = true;
|
|
|
- data = newData;
|
|
|
+ data.value = newData;
|
|
|
}
|
|
|
}
|
|
|
- function save(key) {
|
|
|
- const newData = [...data];
|
|
|
- const newCacheData = [...cacheData];
|
|
|
- const target = newData.filter((item) => key === item.key)[0];
|
|
|
- const targetCache = newCacheData.filter((item) => key === item.key)[0];
|
|
|
- if (target && targetCache) {
|
|
|
- delete target.editable;
|
|
|
- data = newData;
|
|
|
- Object.assign(targetCache, target);
|
|
|
- cacheData = newCacheData;
|
|
|
- }
|
|
|
- editingKey.value = '';
|
|
|
- }
|
|
|
+ // function edit(key) {
|
|
|
+ // const newData = [...data.value];
|
|
|
+ // const target = newData.filter((item) => key === item.key)[0];
|
|
|
+ // editingKey.value = key;
|
|
|
+ // if (target) {
|
|
|
+ // target.editable = true;
|
|
|
+ // data.value = newData;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // function save(key) {
|
|
|
+ // const newData = [...data.value];
|
|
|
+ // const newCacheData = [...cacheData];
|
|
|
+ // const target = newData.filter((item) => key === item.key)[0];
|
|
|
+ // const targetCache = newCacheData.filter((item) => key === item.key)[0];
|
|
|
+ // if (target && targetCache) {
|
|
|
+ // delete target.editable;
|
|
|
+ // data.value = newData;
|
|
|
+ //
|
|
|
+ // console.log(data.value, '123123');
|
|
|
+ // Object.assign(targetCache, target);
|
|
|
+ // cacheData = newCacheData;
|
|
|
+ // }
|
|
|
+ // editingKey.value = '';
|
|
|
+ // }
|
|
|
+
|
|
|
+ const edit = (key: string) => {
|
|
|
+ editableData[key] = cloneDeep(data.value.filter((item) => key === item.key)[0]);
|
|
|
+ };
|
|
|
+ const save = (key: string) => {
|
|
|
+ Object.assign(data.value.filter((item) => key === item.key)[0], editableData[key]);
|
|
|
+ delete editableData[key];
|
|
|
+ };
|
|
|
+ const cancel = (key: string) => {
|
|
|
+ delete editableData[key];
|
|
|
+ };
|
|
|
+
|
|
|
+ // function cancel(key: string) {
|
|
|
+ // delete data.value[key];
|
|
|
+ // }
|
|
|
|
|
|
defineExpose({ onClose, init });
|
|
|
</script>
|
chenlei1231