feat:

工单管理新增编辑功能

src/components/manual-distribution/env.js

@@ -5,4 +5,5 @@ export const METHODS = {
 }
 
 // 可以新增的数量
-export const ADD_NUM = 5
+// export const ADD_NUM = 5
\ No newline at end of file
+export const ADD_NUM = null
\ No newline at end of file

src/components/manual-distribution/form.vue

 <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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

 <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

@@ -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

 <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

+<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

+<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

@@ -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

@@ -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";