Skip to content

S
so-manage-ui
Commit 894ce7f6 authored by 张耀's avatar 张耀
Browse files
Options

feat: 

工单管理新增编辑功能
parent b02fb229
Hide whitespace changes
Inline Side-by-side
Showing with 591 additions and 119 deletions
src/components/manual-distribution/env.js
View file @ 894ce7f6
......@@ -5,4 +5,5 @@ export const METHODS = {
}
// 可以新增的数量
export const ADD_NUM = 5
\ No newline at end of file
// export const ADD_NUM = 5
export const ADD_NUM = null
\ No newline at end of file
src/components/manual-distribution/form.vue
View file @ 894ce7f6
<template>
<el-form :model="state.form" ref="form" :rules="state.rules" label-width="80px" :disabled="disabled">
<el-form-item label="通知方式" prop="method">
<el-form
:model="state.form"
ref="form_ref"
:rules="state.rules"
label-width="110px"
:disabled="disabled"
style="width: 100%">
<el-form-item :label="methodLabel || '通知方式'" prop="method">
<el-checkbox-group v-model="state.form.method">
<el-checkbox v-for="(value, key) in METHODS" :key="key" :label="key">
{{ value }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="" prop="lists" class="user-table bg-scroll">
<el-form :model="state.form.lists" ref="table_form" :rules="table_rules" label-width="0">
<el-form-item
label=" "
prop="lists"
class="user-table bg-scroll"
:class="{
'no-el-label': noElLabel,
}">
<el-form :model="state.form.lists" ref="table_form" :rules="state.tableRules" label-width="0" style="width: 100%">
<el-table :data="state.form.lists" stripe border>
<el-table-column type="index" label="序号" width="60px"> </el-table-column>
<el-table-column
......@@ -49,7 +61,7 @@
link
type="primary"
@click="Add($index)"
:disabled="userLists.length <= state.form.lists.length || addTrue >= ADD_NUM">
:disabled="userLists.length <= state.form.lists.length || (ADD_NUM && addTrue >= ADD_NUM)">
新增
</el-button>
<span class="line"></span>
......@@ -73,8 +85,20 @@ const props = defineProps({
type: Boolean,
default: false,
},
noElLabel: {
type: Boolean,
default: true,
},
methodLabel: {
type: String,
default: "",
},
history: {
type: Object,
default: () => ({}),
},
});
const form = ref(null);
const form_ref = ref(null);
// 表单数据
const state = reactive({
form: {
......@@ -118,20 +142,14 @@ const headers = [
];
const table_form = ref(null);
// 立即下发
const Submit = (cb = null) => {
form.value.validate((valid) => {
if (valid) {
table_form.value.validate((t_v) => {
if (t_v) {
cb && cb(state.form);
} else {
return false;
}
});
} else {
return false;
}
const Submit = async (cb = null) => {
let form_valid = await new Promise((resolve, reject) => {
form_ref.value.validate((res) => resolve(res));
});
let table_form_valid = await new Promise((resolve, reject) => {
table_form.value.validate((res) => resolve(res));
});
return form_valid && table_form_valid;
};
// 已经新增的数量记录
const addTrue = ref(0);
......@@ -191,7 +209,7 @@ const userOptions = computed(() => {
// 表格新增
const Add = (index) => {
// 新增上限
if (addTrue.value >= ADD_NUM) return;
if (ADD_NUM && addTrue.value >= ADD_NUM) return;
state.form.lists.splice(index + 1, 0, {
user_id: "",
user_name: "",
......@@ -204,19 +222,26 @@ const Remove = (index) => {
state.form.lists.splice(index, 1);
addTrue.value -= 1;
};
// 初始化加载基础数据和获取用户下拉列表
const init = (history) => {
getUserLists();
state.form.method = history?.method || [];
state.form.lists = history?.lists || [];
// 如果没有默认下发用户则创建一条空数据
if (state.form.lists.length == 0) {
Add(0);
watch(
() => props.history,
(n) => {
let history = { ...n };
getUserLists();
state.form.method = history?.method || [];
state.form.lists = history?.lists || [];
// 如果没有默认下发用户则创建一条空数据
if (state.form.lists.length == 0) {
Add(0);
}
setTimeout(() => {
form_ref.value.clearValidate();
});
},
{
deep: true,
immediate: true,
}
setTimeout(() => {
form.value.clearValidate();
});
};
);
// 选择用户操作
const chooseUser = ($event, index) => {
let user = userLists.value.find((e) => e.user_id == state.form.lists[index].user_id);
......@@ -225,16 +250,9 @@ const chooseUser = ($event, index) => {
};
defineExpose({
Submit,
form,
init,
form_ref,
form: state.form,
});
watch(
() => state.form.lists,
(n) => {
console.log(n);
},
{ deep: true }
);
</script>
<style lang="scss" scoped>
......@@ -251,11 +269,16 @@ watch(
}
.user-table {
max-height: 345px;
:deep(.el-table thead th) {
background-color: #f5f6f9;
}
}
.no-el-label {
:deep(.el-form-item__content) {
margin-left: 0 !important;
.el-table thead th {
background-color: #f5f6f9;
}
}
}
:deep(.el-form-item .el-form-item) {
margin-bottom: 0 !important;
}
</style>
src/components/manual-distribution/index.vue
View file @ 894ce7f6
......@@ -4,7 +4,7 @@
<GapTitle title="手动下发"></GapTitle>
</template>
<div class="manual-distribution">
<Form ref="form" />
<Form :history="history" ref="form" />
</div>
<template #footer>
<el-button size="default" @click="Close">关闭</el-button>
......@@ -29,6 +29,12 @@ const props = defineProps({
default: null,
},
// 默认数据展示
row: {
type: Object,
default: null,
},
});
const history = computed(() => {
/*
{
methd:['1','2'],
......@@ -41,16 +47,13 @@ const props = defineProps({
]
}
*/
history: {
type: Object,
default: null,
},
return props.row?.history || null;
});
const emits = defineEmits(["update:visible"]);
const form = ref(null);
// 关闭调用
const Close = async () => {
form.value.form.resetFields();
form.value.form_ref.resetFields();
emits("update:visible", false);
};
const show = computed({
......@@ -67,7 +70,6 @@ watch(
async (n) => {
if (!n) return;
await nextTick();
form.value.init(props.history);
},
{
immediate: true,
......@@ -79,13 +81,13 @@ const beforeClose = () => {
Close();
};
// 立即下发
const Submit = () => {
form.value.Submit(async (form) => {
let res = { ...form };
console.log("res: ", res);
await nextTick();
Close();
});
const Submit = async () => {
let form_valid = await form.value.Submit();
if (!form_valid) return;
let res = { ...form.value.form };
console.log("res: ", res);
await nextTick();
Close();
};
</script>
<style lang="scss" scoped>
......
src/components/warn-detail/info.vue
View file @ 894ce7f6
......@@ -7,15 +7,12 @@
</div>
<div class="value">
<div class="value-body">
<span v-if="item.prop == 'status'">
<slot name="status" :item="item" :valueData="valueData" v-if="slots.status" />
<span class="status-body" v-else>
<slot :name="item.prop" :item="item" :valueData="valueData" v-if="slots[item.prop]" />
<span v-else>
<span v-if="item.prop == 'status'" class="status-body">
<span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
</span>
</span>
<span v-else>
<slot name="value" :item="item" :valueData="valueData" v-if="slots.value" />
<span v-else>{{ valueData[item.prop] }}</span>
</span>
</div>
......
src/page/main/ticket/business-ticket-list/detail/index.vue
View file @ 894ce7f6
......@@ -21,9 +21,12 @@
<gap-title :hasLine="true" title="推送方式"></gap-title>
<div class="info">
<Info :labelData="notificationMethod" :valueData="info">
<template #value="{ item, valueData }">
<span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
<template #notification_method="{ valueData }">
<span>{{ valueData.notification_method.map((e) => METHODS[e]).join("，") }}</span>
</template>
<!-- <template #value="{ item, valueData }">
<span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
</template> -->
</Info>
<div class="notification-lists">
<bg-table border ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true"> </bg-table>
......
src/page/main/ticket/business-ticket-manage/add/index.vue
View file @ 894ce7f6
......@@ -3,15 +3,39 @@
<div class="breadcrumb">
<bg-breadcrumb />
</div>
<div class="content bg-scroll">
<add-form></add-form>
<div class="content">
<div class="add-form-main bg-scroll">
<add-form ref="add_form"></add-form>
</div>
<div class="add-btns">
<el-button size="default" @click="Cancle">取消</el-button>
<el-button type="primary" size="default" @click="Save">保存</el-button>
<el-button type="primary" size="default" @click="Distribute">立即下发</el-button>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import addForm from "../modules/add-form.vue";
const router = useRouter();
const Cancle = () => {
router.go(-1);
};
const add_form = ref(null);
const Save = async () => {
let res = await add_form.value.Submit();
if (!res) return;
console.log("res: ", res);
};
const Distribute = async () => {
let res = await add_form.value.Submit();
if (!res) return;
console.log("res: ", res);
};
</script>
<style lang="scss" scoped>
......@@ -29,7 +53,17 @@ import addForm from "../modules/add-form.vue";
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
padding: 24px;
.add-form-main {
padding: 24px;
height: calc(100% - 68px);
}
.add-btns {
height: 68px;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid #ddd;
}
}
}
</style>
src/page/main/ticket/business-ticket-manage/detail/index.vue
View file @ 894ce7f6
......@@ -18,9 +18,12 @@
<gap-title :hasLine="true" title="推送方式"></gap-title>
<div class="info">
<Info :labelData="notificationMethod" :valueData="info">
<template #value="{ item, valueData }">
<span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
<template #notification_method="{ valueData }">
<span>{{ valueData.notification_method.map((e) => METHODS[e]).join("，") }}</span>
</template>
<!-- <template #value="{ item, valueData }">
<span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
</template> -->
</Info>
<div class="notification-lists">
<bg-table border ref="notification_table" :headers="headers" :rows="rows" height="100%" :isIndex="true">
......@@ -30,9 +33,12 @@
<gap-title :hasLine="true" title="定时规则"></gap-title>
<div class="info">
<Info :labelData="timeingRules" :valueData="info">
<template #value="{ item, valueData }">
<span>{{ TIMEING_RULES[valueData[item.prop]] }}</span>
<template #timeing_rules="{ valueData }">
<span>{{ TIMEING_RULES[valueData.timeing_rules] }}</span>
</template>
<!-- <template #value="{ item, valueData }">
<span>{{ TIMEING_RULES[valueData[item.prop]] }}</span>
</template> -->
</Info>
<div class="notification-lists">
<bg-table
......
src/page/main/ticket/business-ticket-manage/edit/index.vue
View file @ 894ce7f6
<template>
<div class="edit-ticket">
<div class="add-ticket">
<div class="breadcrumb">
<bg-breadcrumb />
</div>
<div class="content bg-scroll"></div>
<div class="content">
<div class="add-form-main bg-scroll">
<add-form ref="add_form" :row="infoData"></add-form>
</div>
<div class="add-btns">
<el-button size="default" @click="Cancle">取消</el-button>
<el-button type="primary" size="default" @click="Save">保存</el-button>
<el-button type="success" size="default" @click="Distribute">立即下发</el-button>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import addForm from "../modules/add-form.vue";
const router = useRouter();
const infoData = ref({});
const Cancle = () => {
router.go(-1);
};
const add_form = ref(null);
const Save = async () => {
let res = await add_form.value.Submit();
if (!res) return;
console.log("res: ", res);
};
const Distribute = async () => {
let res = await add_form.value.Submit();
if (!res) return;
console.log("res: ", res);
};
onMounted(() => {
setTimeout(() => {
infoData.value = {
ticket_name: 11,
id: 111,
status: 1,
finish: 10,
all: 10,
history: {
method: ["1", "2"],
lists: [
{
user_id: "1111",
user_name: "11111111",
phone: "13011111111",
},
],
},
ticket_name: "1",
ticket_level: 1,
ticket_desc: "1111",
timing_rules: 2,
rules: {
lists: [
{
date: ["2023-01-01", "2023-12-31"],
time: "00:00:00",
},
{
date: ["2023-01-01", "2023-12-31"],
time: "00:00:01",
},
],
week_days: [1, 2, 3, 4, 6],
time: "00:00:03",
},
};
}, 1000);
});
</script>
<style lang="scss" scoped>
.edit-ticket {
.add-ticket {
width: 100%;
height: 100%;
padding: 0 24px 16px;
......@@ -26,7 +93,18 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
padding: 40px 54px;
.add-form-main {
padding: 24px;
height: calc(100% - 68px);
}
.add-btns {
height: 68px;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid #ddd;
padding: 0 24px;
}
}
}
</style>
src/page/main/ticket/business-ticket-manage/index.vue
View file @ 894ce7f6
......@@ -93,13 +93,26 @@
<span v-if="row.status != 3"> （{{ row.finish }}/{{ row.all }}） </span>
</span>
</template>
<template #enable="{ row }">
<el-switch
v-model="row.enable"
active-text="是"
inactive-text="否"
inline-prompt
:active-value="true"
:inactive-value="false"
@change="Enable(row)">
</el-switch>
</template>
<template #operation="{ row }">
<div class="table-operation">
<span class="primary-edit" @click="operation(row)"> 手动下发 </span>
<el-button type="primary" link size="default" @click="operation(row)">手动下发</el-button>
<span class="line"></span>
<span class="primary-edit" @click="Edit(row)"> 编辑 </span>
<el-button type="primary" link size="default" @click="Edit(row)" :disabled="row.enable">编辑</el-button>
<span class="line"></span>
<span class="primary-edit" @click="Delete(row)"> 删除 </span>
<el-button type="primary" link size="default" @click="Delete(row)" :disabled="row.enable">
删除
</el-button>
</div>
</template>
</bg-table>
......@@ -115,7 +128,7 @@
</div>
</div>
<ManualDistribution v-model:visible="visible" :active_row="active_row" />
<ManualDistribution v-model:visible="visible" :row="active_row" />
</div>
</div>
</template>
......@@ -197,7 +210,7 @@ let headers = reactive([
},
{
label: "定时是否启用",
prop: "status",
prop: "enable",
align: "left",
width: 150,
},
......@@ -215,13 +228,31 @@ let headers = reactive([
label: "操作",
prop: "operation",
align: "left",
width: "200px",
width: "220px",
fixed: "right",
},
]);
let rows = ref([
{ ticket_name: 11, id: 111, status: 1, finish: 10, all: 10 },
{ ticket_name: 22, id: 222, status: 2, finish: 5, all: 10 },
{ ticket_name: 33, id: 333, status: 3, finish: 0, all: 10 },
{
ticket_name: 11,
id: 111,
status: 1,
finish: 10,
all: 10,
history: {
method: ["1", "2"],
lists: [
{
user_id: "1111",
user_name: "11111111",
phone: "13011111111",
},
],
},
enable: true,
},
{ ticket_name: 22, id: 222, status: 2, finish: 5, all: 10, enable: false },
{ ticket_name: 33, id: 333, status: 3, finish: 0, all: 10, enable: false },
]);
const changeSize = (size) => {
filter.limit = size;
......@@ -310,6 +341,7 @@ const goTo = ({ id }) => {
},
});
};
const Enable = (row) => {};
</script>
<style lang="scss" scoped>
......@@ -389,6 +421,11 @@ const goTo = ({ id }) => {
display: inline-block;
}
}
:deep(.el-switch__inner) {
.is-hide {
display: none;
}
}
}
}
</style>
src/page/main/ticket/business-ticket-manage/modules/add-form.vue
View file @ 894ce7f6
<template>
<div class="add-form">
<el-form :model="state.form" ref="form" :rules="state.rules" label-width="80px">
<el-form :model="state.form" ref="form" :rules="state.rules" label-width="110px">
<el-form-item label="工单名称" prop="ticket_name">
<el-input v-model="state.form.ticket_name" placeholder="请输入工单名称"></el-input>
<el-input v-model="state.form.ticket_name" :disabled="isEdit" placeholder="请输入工单名称"></el-input>
</el-form-item>
<el-form-item label="工单等级" prop="ticket_level">
<el-select v-model="state.form.ticket_level" placeholder="请选择工单等级" clearable filterable style="flex: 1">
......@@ -13,9 +13,34 @@
<el-form-item label="工单描述" prop="ticket_desc">
<el-input type="textarea" :rows="5" v-model="state.form.ticket_desc" placeholder="请输入工单描述"></el-input>
</el-form-item>
<el-form-item label="推送方式" prop="push_method">
<el-form-item class="no-el-label" label="" prop="push_method">
<div style="width: 100%">
<ManualDistributionForm
ref="manual_distribution_form"
:noElLabel="false"
methodLabel="推送方式"
:history="history" />
</div>
</el-form-item>
<el-form-item label="定时规则" prop="timing_rules">
<div style="flex: 1">
<ManualDistributionForm ref="manual_distribution_form" />
<div class="choose-rule">
<el-select
v-model="state.form.timing_rules"
placeholder=""
clearable
filterable
@change="changeTimeRules"
style="width: 100%">
<el-option v-for="item in timeRulesOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
</div>
</el-form-item>
<el-form-item class="no-el-label" label="" prop="" v-if="state.form.timing_rules != 1">
<div style="width: 100%">
<component ref="rule_ref" :is="coms[state.form.timing_rules]" :rules="rules"></component>
</div>
</el-form-item>
</el-form>
......@@ -23,9 +48,29 @@
</template>
<script setup>
import { computed, reactive, ref } from "vue";
import { computed, onMounted, reactive, ref, shallowReactive, defineExpose, watch } from "vue";
import ManualDistributionForm from "@/components/manual-distribution/form.vue";
import customTime from "./custom-time.vue";
import byWeek from "./by-week.vue";
const manual_distribution_form = ref(null);
const coms = shallowReactive({
2: byWeek,
3: customTime,
});
const timeRulesOptions = ref([
{
id: 1,
name: "手动下发",
},
{
id: 2,
name: "按周",
},
{
id: 3,
name: "自定义时间",
},
]);
const TICKET_LEVEL_OPTIONS = [
{
id: 1,
......@@ -41,18 +86,19 @@ const TICKET_LEVEL_OPTIONS = [
},
];
const props = defineProps({
defaultValue: {
row: {
type: Object,
default: null,
},
});
const isEdit = computed(() => !!props.defaultValue);
console.log("isEdit: ", isEdit);
const isEdit = computed(() => !!props.row);
const history = computed(() => props.row?.history || null);
const state = reactive({
form: {
ticket_name: "",
ticket_level: "",
ticket_desc: "",
timing_rules: 1,
},
rules: {
ticket_name: [{ required: true, message: "请输入工单名称", trigger: "blur" }],
......@@ -61,11 +107,54 @@ const state = reactive({
},
ticketLevelOptions: TICKET_LEVEL_OPTIONS,
});
const rules = computed(() => props.row?.rules || null);
watch(
() => isEdit.value,
(n) => {
if (!n) return;
let { ticket_name, ticket_level, ticket_desc, timing_rules } = props.row;
state.form.ticket_name = ticket_name;
state.form.ticket_level = ticket_level;
state.form.ticket_desc = ticket_desc;
state.form.timing_rules = timing_rules;
},
{
deep: true,
immediate: true,
}
);
const changeTimeRules = () => {};
const rule_ref = ref(null);
const form = ref(null);
const Submit = async () => {
const manual_distribution_form_valid = await manual_distribution_form.value.Submit();
const rule_ref_valid = !rule_ref.value ? true : await rule_ref.value.Submit();
const form_valid = await new Promise((resolve, reject) => {
form.value.validate((res) => resolve(res));
});
if (!form_valid || !rule_ref_valid || !manual_distribution_form_valid) return;
return {
...state.form,
...manual_distribution_form.value.form,
...rule_ref.value.form,
};
};
defineExpose({
Submit,
});
</script>
<style lang="scss" scoped>
.add-form {
width: 100%;
max-width: 1050px;
.no-el-label {
:deep(.el-form-item__content) {
margin-left: 0 !important;
}
}
:deep(.el-form-item .el-form-item) {
margin-bottom: 18px;
}
}
</style>
src/page/main/ticket/business-ticket-manage/modules/by-week.vue 0 → 100644
View file @ 894ce7f6
<template>
<el-form :model="state.form" ref="form" :rules="rules" label-width="110px">
<el-form-item label="按周 （多选）" prop="week_days">
<el-select v-model="state.form.week_days" :multiple="true" placeholder="请选择" style="flex: 1">
<el-option v-for="item in weekDayOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="时间点" prop="time">
<el-time-picker v-model="state.form.time" placeholder="请选择时间点" value-format="HH:mm:ss" style="flex: 1">
</el-time-picker>
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
const props = defineProps({
rules: {
type: Object,
default: null,
},
});
const weekDayOptions = [
{
id: 1,
name: "周一",
},
{
id: 2,
name: "周二",
},
{
id: 3,
name: "周三",
},
{
id: 4,
name: "周四",
},
{
id: 5,
name: "周五",
},
{
id: 6,
name: "周六",
},
{
id: 7,
name: "周日",
},
];
const state = reactive({
form: {
week_days: [],
time: "",
},
});
const rules = {
week_days: [{ type: "array", required: true, message: "请至少选择一天", trigger: "change" }],
time: [{ required: true, message: "请选择时间点", trigger: "change" }],
};
watch(
() => props.rules,
(n) => {
if (n) {
state.form.week_days = n.week_days || [];
state.form.time = n.time || "";
}
},
{
deep: true,
immediate: true,
}
);
const form = ref(null);
const Submit = async () => {
const isValid = await new Promise((resolve, reject) => {
form.value.validate((res) => resolve(res));
});
return isValid;
};
defineExpose({
Submit,
form: state.form,
});
</script>
src/page/main/ticket/business-ticket-manage/modules/custom-time.vue 0 → 100644
View file @ 894ce7f6
<template>
<div class="custom-time">
<el-form :model="state.form.rules" ref="form" :rules="rules" label-width="0" style="width: 100%">
<el-table :data="state.form.rules" border stripe>
<el-table-column label="日期范围" prop="date">
<template #default="{ $index }">
<el-form-item :prop="`[${$index}].date`" :rules="rules.date">
<el-date-picker
v-model="state.form.rules[$index].date"
type="daterange"
range-separator="-"
value-format="YYYY-MM-DD"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 100%">
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="时间点" prop="time">
<template #default="{ $index }">
<el-form-item :prop="`[${$index}].time`" :rules="rules.time">
<el-time-picker
style="width: 100%"
v-model="state.form.rules[$index].time"
placeholder="请选择时间"
value-format="HH:mm:ss">
</el-time-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" prop="" width="125px">
<template #default="{ $index }">
<div class="table-operation">
<el-button link type="primary" @click="Add($index)" :disabled="state.form.rules.length >= ADD_NUM">
新增
</el-button>
<span class="line"></span>
<el-button link type="primary" @click="Remove($index)" :disabled="state.form.rules.length == 1">
删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
const ADD_NUM = 8;
const props = defineProps({
rules: {
type: Object,
default: null,
},
});
const state = reactive({
form: {
rules: [],
},
});
const rules = {
date: [{ required: true, message: "请选择", trigger: "change" }],
time: [{ required: true, message: "请选择", trigger: "change" }],
};
const addTrue = ref(0);
// 表格新增
const Add = (index) => {
// 新增上限
if (state.form.rules.length >= ADD_NUM) return;
state.form.rules.splice(index + 1, 0, {
date: [],
time: "",
});
addTrue.value += 1;
};
// 表格删除
const Remove = (index) => {
state.form.rules.splice(index, 1);
addTrue.value -= 1;
};
watch(
() => props.rules,
(n) => {
state.form.rules =
n?.lists.map((e) => {
return {
date: e.date,
time: e.time,
};
}) || [];
if (state.form.rules.length == 0) {
Add(-1);
}
},
{
deep: true,
immediate: true,
}
);
const form = ref(null);
const Submit = async () => {
const isValid = await new Promise((resolve, reject) => {
form.value.validate((res) => resolve(res));
});
return isValid;
};
defineExpose({
Submit,
form: state.form,
});
</script>
<style lang="scss" scoped>
.table-operation {
display: flex;
align-items: center;
.line {
width: 1px;
height: 14px;
background-color: #c1c7d7;
margin: 0 16px;
display: inline-block;
}
}
.custom-time {
padding-left: 110px;
}
:deep(.el-form-item) {
margin-bottom: 0 !important;
}
</style>
src/page/main/ticket/my-business-ticket/detail/index.vue
View file @ 894ce7f6
......@@ -21,9 +21,12 @@
<gap-title :hasLine="true" title="推送方式"></gap-title>
<div class="info">
<Info :labelData="notificationMethod" :valueData="info">
<template #value="{ item, valueData }">
<span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
<template #notification_method="{ valueData }">
<span>{{ valueData.notification_method.map((e) => METHODS[e]).join("，") }}</span>
</template>
<!-- <template #value="{ item, valueData }">
<span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
</template> -->
</Info>
<div class="notification-lists">
<bg-table border ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true"> </bg-table>
......
src/page/main/ticket/my-business-ticket/index.vue
View file @ 894ce7f6
......@@ -79,34 +79,12 @@
</div>
</div>
</div>
<!-- <el-button type="primary" size="default" @click="feedback">
处置反馈
</el-button> -->
<!-- <ManualDistributionForm ref="form" :disabled="true" /> -->
<FeedBack v-model:visible="visible" :active_row="active_row" />
<!-- <ManualDistribution v-model:visible="visible" /> -->
</div>
</div>
</template>
<script setup>
// import { nextTick, onBeforeMount, onMounted, ref } from "vue";
// import ManualDistribution from "@/components/manual-distribution/index.vue";
// import ManualDistributionForm from "@/components/manual-distribution/form.vue";
// const form = ref(null);
// onMounted(async () => {
// await nextTick();
// form.value.init({
// method: ["1", "2"],
// lists: [
// {
// user_id: 1,
// user_name: 1111,
// phone: "13011111111",
// },
// ],
// });
// });
import { ref, reactive, onMounted, nextTick } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import FeedBack from "../modules/feedback.vue";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment