|
@@ -0,0 +1,241 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <a-row :gutter="16" style="margin-bottom: 20px">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-button type="primary" @click="submitAll" :loading="loading" style="margin-right: 6px"> 保存流程 </a-button>
|
|
|
+ <a-button @click="addNew" :loading="loading"> 新增节点 </a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :rowKey="(record, index) => index"
|
|
|
+ :data-source="data"
|
|
|
+ :pagination="false"
|
|
|
+ :scroll="{ x: true }"
|
|
|
+ :loading="tableLoading"
|
|
|
+ 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>
|
|
|
+ <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>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { getAction, postAction } from '/@/api/manage/manage';
|
|
|
+ import { reactive, ref } from 'vue';
|
|
|
+ import { useMessage } from '@/hooks/web/useMessage';
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ title: '节点名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ scopedSlots: { customRender: 'name' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '节点描述',
|
|
|
+ dataIndex: 'description',
|
|
|
+ scopedSlots: { customRender: 'description' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '预计时间',
|
|
|
+ dataIndex: 'timeDesc',
|
|
|
+ scopedSlots: { customRender: 'timeDesc' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dataIndex: 'proportion',
|
|
|
+ scopedSlots: { customRender: 'proportion', title: 'proportionTitle' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '排序',
|
|
|
+ dataIndex: 'id',
|
|
|
+ scopedSlots: { customRender: 'id' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ scopedSlots: { customRender: 'action' },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ let data = reactive([{}]);
|
|
|
+ const editingKey = ref('');
|
|
|
+ const hostId = ref('');
|
|
|
+ const tableLoading = ref(false);
|
|
|
+ const loading = ref(false);
|
|
|
+ let record = reactive({});
|
|
|
+ let cacheData = reactive([{}]);
|
|
|
+
|
|
|
+ const { createMessage } = useMessage();
|
|
|
+ function submitAll() {
|
|
|
+ let d = data;
|
|
|
+ let proportion = 0;
|
|
|
+ for (let i in d) {
|
|
|
+ proportion += parseInt(d[i].proportion);
|
|
|
+ }
|
|
|
+ if (parseInt(proportion) !== 100) {
|
|
|
+ createMessage.warn('权重之和应为100');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ loading.value = true;
|
|
|
+ // for(let i in d){
|
|
|
+ // delete d[i].key
|
|
|
+ // }
|
|
|
+ postAction('/adweb/executeNode/saveFlowTemplate', d, 120000)
|
|
|
+ .then((res) => {
|
|
|
+ loading.value = false;
|
|
|
+ if (res.code == 200) {
|
|
|
+ createMessage.success('保存成功');
|
|
|
+ } else {
|
|
|
+ createMessage.warn(res.message);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ createMessage.warn('保存数据失败!');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function addNew() {
|
|
|
+ data.push({
|
|
|
+ createTime: null,
|
|
|
+ delFlag: 0,
|
|
|
+ description: '',
|
|
|
+ finTime: null,
|
|
|
+ finUid: null,
|
|
|
+ hostId: hostId,
|
|
|
+ id: '',
|
|
|
+ name: '',
|
|
|
+ nodeType: 3,
|
|
|
+ proportion: null,
|
|
|
+ sort: 1,
|
|
|
+ status: null,
|
|
|
+ timeDesc: null,
|
|
|
+ type: 1,
|
|
|
+ key: data.length,
|
|
|
+ });
|
|
|
+ cacheData = data;
|
|
|
+ }
|
|
|
+ //排序
|
|
|
+ function up(r, i) {
|
|
|
+ if (i == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ data.splice(i - 1, 0, data[i]);
|
|
|
+ data.splice(i + 1, 1);
|
|
|
+ }
|
|
|
+ function down(r, i) {
|
|
|
+ if (i == data.length - 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ data.splice(i + 2, 0, data[i]);
|
|
|
+ data.splice(i, 1);
|
|
|
+ }
|
|
|
+ function deleteRow(i) {
|
|
|
+ data.splice(i, 1);
|
|
|
+ }
|
|
|
+ function onClose() {
|
|
|
+ data = [];
|
|
|
+ }
|
|
|
+ function init(r, t) {
|
|
|
+ record = r;
|
|
|
+ if (t == 'seo') {
|
|
|
+ url = '/adweb/executeNode/querySEOTemplateFlow?planId=' + r.id;
|
|
|
+ } else {
|
|
|
+ url = '/adweb/executeNode/querySiteBuildTemplateFlow';
|
|
|
+ }
|
|
|
+ showStep();
|
|
|
+ }
|
|
|
+ function showStep() {
|
|
|
+ let that = this;
|
|
|
+ that.tableLoading = true;
|
|
|
+ getAction(that.url)
|
|
|
+ .then((res) => {
|
|
|
+ that.tableLoading = false;
|
|
|
+ if (res.success) {
|
|
|
+ res.result.map((item, index) => {
|
|
|
+ that.data.push(Object.assign({}, item, { key: index }));
|
|
|
+ cacheData = data;
|
|
|
+ hostId.value = res.result[0].hostId;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ createMessage.warn('获取数据失败!');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function handleChange(value, key, column) {
|
|
|
+ const newData = [...data];
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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 = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ defineExpose({ onClose, init });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ .ant-tag.disabled {
|
|
|
+ cursor: no-drop !important;
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+</style>
|