✨ feat:

工单管理页面开发

package.json

@@ -16,8 +16,10 @@
     "element-plus": "^2.2.9",
     "html2canvas": "^1.4.1",
     "sass": "^1.35.1",
+    "string-format": "^2.0.0",
     "uuid": "^8.3.2",
     "vue": "^3.2.31",
+    "vue-demi": "^0.14.5",
     "vue-i18n": "^9.1.7",
     "vue-router": "^4.0.10",
     "vue3-ace-editor": "^2.2.2",

src/assets/css/index.css

 .page_container {
-  width: 100%;
-  padding: 0 24px;
-  /* min-height: 100%; */
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
+    width: 100%;
+    padding: 0 24px;
+    /* min-height: 100%; */
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
 }
+
 .page_content {
     background-color: #fff;
     height: calc(100% - 46px - 20px);
-    box-shadow: 0px 1px 4px 0px 
-		rgba(0, 7, 101, 0.15);
-	border-radius: 6px;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
 }
\ No newline at end of file

src/components/gap-title.vue

+<template>
+    <div class="gap-title">
+        <span>{{title}}</span>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        title:{
+            type:String,
+            default:""
+        }
+    },
+    components: {
+
+    },
+    data() {
+        return {
+
+        };
+    },
+    watch: {
+
+    },
+    computed: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped>
+.gap-title{
+    font-size: 18px;
+	font-weight: 600;
+	color: #202531;
+    display: flex;
+    align-items: center;
+}
+.gap-title::before{
+    content:'';
+    display: inline-block;
+    margin-right: 8px;
+    width: 4px;
+	height: 16px;
+	background-color: #2b4695;
+	border-radius: 2px;
+}
+</style>

src/components/manual-distribution/env.js

+// 通知方式
+export const METHODS = {
+    1: '钉钉',
+    2: '短信'
+}
+
+// 可以新增的数量
+export const ADD_NUM = 5
\ 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-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-table :data="state.form.lists" stripe border>
+        <el-table-column type="index" label="序号" width="60px">
+        </el-table-column>
+        <el-table-column
+          v-for="header in headers"
+          :prop="header.prop"
+          :key="header.prop"
+          :label="header.label"
+          :width="header.width"
+        >
+          <template #default="{ $index }">
+            <div v-if="header.prop == 'user_id'">
+              <el-select
+                v-model="state.form.lists[$index].user_id"
+                placeholder="请选择"
+                filterable
+                @change="($event) => chooseUser($event, $index)"
+              >
+                <el-option
+                  v-for="item in userOptions($index)"
+                  :key="item.user_id"
+                  :label="item.user_id"
+                  :value="item.user_id"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div v-else>
+              <el-input
+                v-model="state.form.lists[$index][header.prop]"
+                placeholder="请输入"
+              ></el-input>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="" label="操作" width="125px">
+          <template #default="{ $index }">
+            <div class="table-operation">
+              <el-button
+                link
+                type="primary"
+                @click="Add($index)"
+                :disabled="
+                  userLists.length <= state.form.lists.length ||
+                  addTrue >= ADD_NUM
+                "
+              >
+                新增
+              </el-button>
+              <span class="line"></span>
+              <el-button
+                link
+                type="primary"
+                @click="Remove($index)"
+                :disabled="state.form.lists.length == 1"
+              >
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { reactive, watch, ref, computed } from "vue";
+import { METHODS, ADD_NUM } from "./env";
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const form = ref(null);
+// 表单数据
+const state = reactive({
+  form: {
+    method: [],
+    lists: [],
+  },
+  rules: {
+    method: [
+      {
+        type: "array",
+        required: true,
+        message: "请至少选择一个通知方式",
+        trigger: "change",
+      },
+    ],
+  },
+});
+// 已选中的用户id列表
+const selectedUser = computed(() => {
+  return state.form.lists.map((e) => e.user_id) || [];
+});
+// 表头
+const headers = [
+  {
+    prop: "user_id",
+    label: "账号",
+  },
+  {
+    prop: "user_name",
+    label: "姓名",
+  },
+  {
+    prop: "phone",
+    label: "联系方式",
+  },
+];
+// 立即下发
+const Submit = (cb = null) => {
+  form.value.validate((valid) => {
+    if (valid) {
+      console.log(state.form);
+      cb && cb();
+    } else {
+      return false;
+    }
+  });
+};
+// 已经新增的数量记录
+const addTrue = ref(0);
+// 获取远程用户列表
+const userLists = ref([]);
+const getUserLists = () => {
+  userLists.value = [
+    {
+      user_id: 1,
+      user_name: 11,
+      phone: 13000000001,
+    },
+    {
+      user_id: 2,
+      user_name: 22,
+      phone: 13000000002,
+    },
+    {
+      user_id: 3,
+      user_name: 33,
+      phone: 13000000003,
+    },
+    {
+      user_id: 4,
+      user_name: 44,
+      phone: 13000000004,
+    },
+    {
+      user_id: 5,
+      user_name: 55,
+      phone: 13000000005,
+    },
+    {
+      user_id: 6,
+      user_name: 66,
+      phone: 13000000006,
+    },
+    {
+      user_id: 7,
+      user_name: 77,
+      phone: 13000000007,
+    },
+  ];
+};
+// 格式化处理用户下拉列表，去除已经选择的用户，并将当前选中的也显示到列表中
+const userOptions = computed(() => {
+  return (index) => {
+    let user_id = state.form.lists[index].user_id;
+    let s_u_ids = [...selectedUser.value];
+    if (user_id) {
+      let i = s_u_ids.findIndex((e) => e == user_id);
+      s_u_ids.splice(i, 1);
+    }
+    return userLists.value.filter((e) => !s_u_ids.includes(e.user_id));
+  };
+});
+// 表格新增
+const Add = (index) => {
+  // 新增上限
+  if (addTrue.value >= ADD_NUM) return;
+  state.form.lists.splice(index + 1, 0, {
+    user_id: "",
+    user_name: "",
+    phone: "",
+  });
+  addTrue.value += 1;
+};
+// 表格删除
+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);
+  }
+  setTimeout(() => {
+    form.value.clearValidate();
+  });
+};
+// 选择用户操作
+const chooseUser = ($event, index) => {
+  let user = userLists.value.find(
+    (e) => e.user_id == state.form.lists[index].user_id
+  );
+  state.form.lists[index].user_name = user.user_name;
+  state.form.lists[index].phone = user.phone;
+};
+defineExpose({
+  Submit,
+  form,
+  init,
+});
+watch(
+  () => state.form.lists,
+  (n) => {
+    console.log(n);
+  },
+  { deep: true }
+);
+</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;
+  }
+}
+.user-table {
+  max-height: 345px;
+  :deep(.el-form-item__content) {
+    margin-left: 0 !important;
+    .el-table thead th {
+      background-color: #f5f6f9;
+    }
+  }
+}
+</style>

src/components/manual-distribution/index.vue

+<template>
+  <el-dialog
+    v-model="show"
+    width="804px"
+    top="10vh"
+    :close-on-click-modal="false"
+    :before-close="beforeClose"
+  >
+    <template #header>
+      <GapTitle title="手动下发"></GapTitle>
+    </template>
+    <div class="manual-distribution">
+      <Form ref="form" />
+    </div>
+    <template #footer>
+      <el-button size="default" @click="Close">关闭</el-button>
+      <el-button type="primary" size="default" @click="Submit">
+        立即下发
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import GapTitle from "@/components/gap-title.vue";
+import Form from "./form.vue";
+import { computed, nextTick, ref, watch } from "vue";
+const props = defineProps({
+  // 显示隐藏开关
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  //   关闭前调用
+  beforeClose: {
+    type: Function,
+    default: null,
+  },
+  //   默认数据展示
+  /* 
+  {
+    methd:['1','2'],
+    lists:[
+        {
+            user_id:'1111',
+            user_name:'11111111',
+            phone:'13011111111'
+        }
+    ]
+  }
+  */
+  history: {
+    type: Object,
+    default: null,
+  },
+});
+const emits = defineEmits(["update:visible"]);
+const form = ref(null);
+// 关闭调用
+const Close = async () => {
+  form.value.form.resetFields();
+  emits("update:visible", false);
+};
+const show = computed({
+  get() {
+    return props.visible;
+  },
+  set() {
+    Close();
+  },
+});
+// 监听是否开启弹窗，并将已经填写的数据配置
+watch(
+  () => show.value,
+  async (n) => {
+    if (!n) return;
+    await nextTick();
+    form.value.init(props.history);
+  },
+  {
+    immediate: true,
+  }
+);
+// 关闭前调用
+const beforeClose = () => {
+  props.beforeClose && props.beforeClose();
+  Close();
+};
+// 立即下发
+const Submit = () => {
+  form.value.Submit(() => {
+    Close();
+  });
+};
+</script>
+<style lang="scss" scoped>
+.manual-distribution {
+  text-align: left;
+  padding: 16px 16px 0;
+}
+</style>

src/components/table/bg-filter-form.vue

+<template>
+  <div
+    class="bg-filters"
+    :style="{
+      'border-bottom': showFlag ? 'none' : '',
+      'padding-bottom': showFlag ? '8px' : '16px',
+    }"
+  >
+    <div class="top-filter">
+      <div class="left-slot">
+        <slot name="left_action"></slot>
+      </div>
+      <div class="right-filter">
+        <el-input
+          v-model.trim="modelValue"
+          :placeholder="placeholder"
+          clearable
+        >
+          <template #append>
+            <div
+              class="append-btn"
+              style="margin-top: 1px"
+              @click="keywordAction"
+            >
+              <el-icon><Search /></el-icon>
+            </div>
+          </template>
+        </el-input>
+        <div
+          v-if="options.length > 0"
+          class="more-btn"
+          :class="showFlag ? 'more-btn1' : ''"
+        >
+          <el-button type="default" class="more-filter" @click="moreFilter">
+            高级搜索
+            <el-icon
+              v-if="!showFlag"
+              style="
+                font-weight: 900 !important;
+                color: #404a62;
+                margin-left: 8px;
+              "
+              ><ArrowUp
+            /></el-icon>
+            <el-icon
+              v-else
+              style="
+                font-weight: 900 !important;
+                color: #404a62;
+                margin-left: 8px;
+              "
+              ><ArrowDown
+            /></el-icon>
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <div v-if="showFlag" class="filter-group">
+      <ul class="bg-flex-fs-c filters-list">
+        <li
+          v-for="(item, index) in options"
+          :key="`opt_${index}`"
+          class="bg-flex-fs-c"
+        >
+          <span v-if="item.label" class="filter-name">{{ item.label }}</span>
+          <!-- 下拉选 select -->
+          <el-select
+            v-if="item.type === 'select'"
+            v-model="filters[item.prop]"
+            :placeholder="item.placeholder || '请选择'"
+            :clearable="item.clearable !== false"
+          >
+            <el-option
+              v-for="(v, i) in item.options"
+              :key="`opt_${index}_v_${i}`"
+              :label="v.label"
+              :value="v.value"
+            />
+          </el-select>
+          <!-- 年月日  daterange-->
+          <el-date-picker
+            v-else-if="item.type === 'daterange'"
+            v-model="filters[item.prop]"
+            type="daterange"
+            start-placeholder="开始日期"
+            range-separator="至"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-DD"
+            :picker-options="{ disabledDate: item.disabledDate }"
+            :clearable="item.clearable !== false"
+          />
+          <!-- 年月日时分秒  datetimerange  :shortcuts="shortcuts"（显示快捷键）-->
+          <el-date-picker
+            v-else-if="item.type === 'datetimerange'"
+            v-model="filters[item.prop]"
+            type="datetimerange"
+            start-placeholder="开始时间"
+            range-separator="至"
+            end-placeholder="结束时间"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            :picker-options="{ disabledDate: item.disabledDate }"
+            :clearable="item.clearable !== false"
+            :shortcuts="item.shortcuts"
+          />
+          <!-- 单选 -->
+          <el-cascader
+            v-else-if="item.type === 'cascader'"
+            v-model="filters[item.prop]"
+            :options="item.options"
+            :props="item.props"
+            :placeholder="item.placeholder || '请选择'"
+            collapse-tags
+            collapse-tags-tooltip
+          />
+          <!-- 多选 -->
+          <el-cascader
+            v-else-if="item.type === 'collapse-cascader'"
+            v-model="filters[item.prop]"
+            :options="item.options"
+            :props="{
+              multiple: true,
+            }"
+            :placeholder="item.placeholder || '请选择'"
+          />
+
+          <el-input
+            v-else
+            v-model="filters[item.prop]"
+            :placeholder="item.placeholder || '请输入'"
+            :clearable="item.clearable !== false"
+            prefix-icon="Search"
+          >
+          </el-input>
+        </li>
+      </ul>
+      <div class="filters-action">
+        <el-button type="primary" @click="searchAction"> 查询 </el-button>
+        <el-button type="default" @click="resetAction"> 重置 </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  defineProps,
+  defineEmits,
+  onBeforeMount,
+  reactive,
+  watch,
+  ref,
+  computed,
+  toRefs,
+  onMounted,
+  nextTick,
+} from "vue";
+let props = defineProps({
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  immediately: {
+    type: Boolean,
+    default: true,
+  },
+  placeholder: {
+    type: String,
+    default: "请输入",
+  },
+});
+
+let emits = defineEmits([
+  "filters",
+  "filtersChange",
+  "keyword",
+  "keywordChange",
+]);
+let filters = reactive({});
+let state = reactive({
+  showFlag: false,
+  modelValue: "",
+});
+
+onBeforeMount(() => {
+  if (props.immediately) {
+    initFilters();
+  }
+});
+onMounted(() => {
+  if (props.immediately) {
+    searchAction();
+  }
+});
+watch(
+  () => state.modelValue,
+  (newValue) => {
+    emits("keywordChange", newValue);
+  }
+);
+
+watch(filters, (newVal) => {
+  emits("filtersChange", newVal);
+});
+
+const initFilters = () => {
+  props.options.forEach(({ type, prop, defaultValue }) => {
+    let value = defaultValue || "";
+
+    if ((type === "daterange" || type === "datetimerange") && value === "") {
+      value = ["", ""];
+    }
+
+    if (type === "cascader" && value === "") {
+      value = [];
+    }
+
+    filters[prop] = value;
+  });
+};
+const keywordAction = () => {
+  emits("keyword", state.modelValue, filters);
+};
+
+const resetAction = () => {
+  initFilters();
+  nextTick(() => {
+    searchAction();
+  });
+};
+const searchAction = () => {
+  emits("filters", filters, state.modelValue);
+};
+const moreFilter = () => {
+  state.showFlag = !state.showFlag;
+};
+
+const reset = () => {
+  state.modelValue = "";
+  resetAction();
+};
+
+defineExpose({ reset });
+
+const { modelValue, showFlag } = toRefs(state);
+</script>
+<style lang="scss" scoped>
+// 列表筛选
+.bg-filters {
+  width: 100%;
+  padding: 16px;
+  border-bottom: 1px solid #e6e9ef;
+
+  .top-filter {
+    width: 100%;
+    display: flex;
+    .left-slot {
+      flex: 1;
+    }
+    .right-filter {
+      width: 398px;
+      justify-content: end;
+      display: flex;
+      :deep(.el-input-group__append) {
+        padding: 0;
+        border-radius: 0;
+      }
+
+      .el-input {
+        width: 280px;
+        height: 36px;
+        .el-input-group__append {
+          border-radius: 0 4px 4px 0;
+          background-color: #f7f7f9;
+          padding: 0;
+          .append-btn {
+            padding: 0 16px;
+            cursor: pointer;
+          }
+        }
+      }
+      .more-btn {
+        margin-left: 16px;
+        width: 102px;
+        box-sizing: border-box;
+        border: 1px solid #e6e9ef;
+        border-radius: 4px;
+        height: 36px;
+        .more-filter {
+          width: 100px;
+          border: none;
+          height: 34px;
+          padding: 10px 15px;
+          line-height: 1;
+          &:active,
+          &:hover {
+            background-color: #fff;
+            color: #3759be;
+          }
+          &:focus {
+            background-color: #fff;
+          }
+        }
+      }
+      .more-btn1 {
+        height: 53px;
+        border-bottom: 1px solid #fff;
+        border-radius: 4px 4px 0 0;
+        margin-bottom: -1px;
+      }
+    }
+  }
+
+  .filter-group {
+    display: flex;
+    align-items: flex-end;
+    border-radius: 4px 0 4px 4px;
+    width: 100%;
+    border: 1px solid #e6e9ef;
+    padding: 24px 16px 8px;
+  }
+  .filters-list {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    li {
+      margin: 0 48px 16px 0;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      .filter-name {
+        font-size: 14px;
+        // font-weight: bolder;
+        line-height: 20px;
+        color: #202531;
+        white-space: nowrap;
+        margin-right: 8px;
+        width: 90px;
+        text-align: right;
+
+        & + * {
+          margin-left: 0;
+        }
+      }
+
+      .el-input {
+        width: 240px;
+        height: 36px;
+      }
+
+      .el-select {
+        width: 240px;
+        height: 36px;
+      }
+
+      .el-range-editor {
+        width: 320px;
+        height: 36px;
+
+        &.el-date-editor--datetimerange {
+          width: 360px;
+          height: 36px;
+        }
+      }
+    }
+  }
+
+  .filters-action {
+    flex-shrink: 0;
+    padding-bottom: 16px;
+  }
+}
+</style>

src/components/table/bg-pagination.vue

+<template>
+  <el-pagination
+    layout="total,sizes ,prev, pager, next,jumper"
+    :page-size="pagination.rowsPerPage"
+    :current-page="pagination.page"
+    :total="pagination.total"
+    :page-sizes="[15, 30, 50]"
+    @current-change="handleCurrentChange"
+    @size-change="handleSizeChange"
+  ></el-pagination>
+</template>
+
+<script setup>
+  import { defineProps, defineEmits } from 'vue'
+  let props = defineProps({
+    pagination: {
+      type: Object,
+      default() {
+        return {
+          rowsPerPage: 15,
+          page: 1,
+          total: 0,
+        }
+      },
+    }, // 表格数据
+  })
+  const emits = defineEmits(['current', 'sizechange'])
+
+  const handleCurrentChange = (val) => {
+    emits('current', val)
+  }
+  const handleSizeChange = (val) => {
+    emits('sizechange', val)
+  }
+</script>

src/components/table/bg-table-href.vue

+<template>
+  <div class="href" @click="goTo">{{ label }}</div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const props = defineProps({
+  row: {
+    type: Object,
+    default: () => ({}),
+  },
+  header: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const label = computed(() => props.row[props.header.prop]);
+const href = computed(() => {
+  const { baseurl: path, params } = props.header.href;
+  const query = {};
+  Object.keys(params).forEach((key) => {
+    query[key] = props.row[params[key]];
+  });
+  return {
+    path,
+    query,
+  };
+});
+const goTo = () => {
+  router.push(href.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.href {
+  font-size: 14px;
+  color: #3759be;
+  cursor: pointer;
+}
+</style>

src/components/table/bg-table-list.vue

+<template>
+  <div class="bg-table-list" v-bind="$attrs">
+    <div v-if="$slots.tabs" class="bg-list-tabs">
+      <slot name="tabs" />
+    </div>
+
+    <!-- 筛选条件 -->
+    <div v-if="$slots.filter" class="bg-list-filters">
+      <slot name="filter" />
+    </div>
+
+    <!-- 列表 -->
+    <main v-if="$slots.main" class="bg-container-main">
+      <div>
+        <slot name="main" />
+      </div>
+    </main>
+    <!-- 分页 -->
+    <footer v-if="$slots.footer" class="bg-container-footer">
+      <slot name="footer" />
+    </footer>
+    <!-- </div> -->
+  </div>
+  <slot />
+</template>
+
+<script>
+export default {
+  name: "BgTableList",
+};
+</script>
+<style lang="scss" scoped>
+.bg-table-list {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-content: stretch;
+}
+.bg-container-main {
+  margin: 0 16px;
+  flex: 1;
+  position: relative;
+  & > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    :deep(.el-table__body-wrapper) {
+        height: calc(100% - 46px);
+    }
+  }
+}
+.bg-container-footer {
+  padding: 16px;
+  :deep(.el-pagination) {
+    justify-content: flex-end;
+  }
+}
+</style>

src/components/table/bg-table.vue

+<template>
+  <el-table
+    ref="bgTable"
+    :data="tablerows"
+    style="width: 100%"
+    class="bg-table"
+    :height="height"
+    stripe
+    tooltip-effect="light"
+    :border="border"
+    @selection-change="selectAction"
+    @sort-change="sortChange"
+  >
+    <!-- 多选框 -->
+    <el-table-column
+      v-if="isSelect"
+      type="selection"
+      :selectable="selectables"
+      width="50"
+      align="center"
+    >
+    </el-table-column>
+    <el-table-column
+      v-if="isIndex"
+      type="index"
+      :label="indexLabel"
+      width="50"
+    >
+      <!-- 序号 -->
+    </el-table-column>
+    <el-table-column
+      v-for="(header, index) in headers"
+      :key="'col_' + index"
+      :width="header.width"
+      :min-width="header.minWidth"
+      :align="header.align"
+      :show-overflow-tooltip="showOverflowTooltip"
+      :sortable="header.sortable ? 'custom' : null"
+      :prop="header.prop"
+    >
+      <template #header>
+        <p class="text-header">{{ header.label }}</p>
+      </template>
+      <template #default="scope">
+        <slot
+          v-if="$slots[header.prop]"
+          :index="scope.$index"
+          :name="header.prop"
+          :row="scope.row"
+          :header="header"
+        />
+        <template v-else>
+          {{ scope.row[header.prop] || "-" }}
+        </template>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup>
+import {
+  defineProps,
+  onMounted,
+  computed,
+  defineEmits,
+  watch,
+  getCurrentInstance,
+} from "vue";
+const { proxy } = getCurrentInstance();
+
+let props = defineProps({
+  headers: { type: Array, default: () => [] }, // 表头
+  rows: { type: Array, default: () => [] }, // 表格数据
+  //标签列是要展开所有内容
+  showOverflowTooltip: {
+    type: Boolean,
+    default: true,
+  },
+  //table高度
+  height: {
+    type: String,
+    default: undefined,
+  },
+  // 是否有多选列
+  isSelect: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否有border
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  isIndex: {
+    type: Boolean,
+    default: false,
+  },
+  indexLabel: {
+    type: String,
+    default: "序号",
+  },
+});
+const emits = defineEmits(["select", "sortchange"]);
+
+// 权限展示列的时候计算属性
+let tablerows = computed(() => {
+  return props.rows;
+});
+
+watch(
+  props.rows,
+  (newValue) => {
+    toggleRowSelection(newValue);
+  },
+  { immediate: false, deep: true }
+);
+// ***********多选框功能start
+// 选中项
+const selectAction = (selection) => {
+  emits("select", selection);
+};
+// 后端返回数据带选中内容
+const toggleRowSelection = (rows) => {
+  rows.forEach((row) => {
+    if (row.isSelet == true) {
+      proxy.$nextTick(function () {
+        proxy.$refs.bgTable.toggleRowSelection(row, true);
+      });
+    }
+  });
+};
+// *********多选是否禁用**********
+const selectables = (row) => {
+  if (row.state !== 2) {
+    return true;
+  }
+};
+// ***********多选框功能end
+const clearSelection = () => {
+  proxy.$refs.bgTable.clearSelection();
+};
+
+const sortChange = (column) => {
+  emits("sortchange", column);
+};
+
+defineExpose({ clearSelection });
+</script>

src/page/main/work-order/business-work-order-list/close-work-order.vue

+<template>
+  <el-dialog
+    v-model="show"
+    width="774px"
+    top="10vh"
+    :before-close="beforeClose"
+    :close-on-click-modal="false"
+  >
+    <template #header>
+      <GapTitle title="关闭工单"></GapTitle>
+    </template>
+    <div class="feedback-body">
+      <el-form
+        :model="state.form"
+        ref="form"
+        :rules="state.rules"
+        label-width="80px"
+      >
+        <el-form-item label="关闭原因" prop="reason">
+          <el-input
+            type="textarea"
+            v-model="state.form.reason"
+            rows="5"
+            placeholder="请输入关闭原因"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <el-button size="default" @click="Close">关闭</el-button>
+      <el-button type="primary" size="default" @click="Submit">提交</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { computed, reactive, ref } from "vue";
+import GapTitle from "@/components/gap-title.vue";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  beforeClose: {
+    type: Function,
+    default: () => {},
+  },
+  active_row: {
+    type: Object,
+    default: null,
+  },
+});
+const state = reactive({
+  form: {
+    reason: "",
+  },
+  rules: {
+    reason: [{ required: true, message: "请输入关闭原因", trigger: "blur" }],
+  },
+});
+const emits = defineEmits(["update:visible"]);
+const form = ref(null);
+const Close = () => {
+  form.value.resetFields();
+  emits("update:visible", false);
+};
+const show = computed({
+  get() {
+    return props.visible;
+  },
+  set() {
+    Close();
+  },
+});
+const beforeClose = () => {
+  props.beforeClose();
+  Close();
+};
+const Submit = () => {
+  form.value.validate((valid) => {
+    if (valid) {
+      console.log(state.form);
+    } else {
+      return false;
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.feedback-body {
+  text-align: left;
+  padding: 24px 16px 0;
+}
+</style>

src/page/main/work-order/business-work-order-manage/detail.vue

+<template>
+    <div>
+business-manage-detail
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file

src/page/main/work-order/modules/detail.vue

+<template>
+  <div>detail</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/page/main/work-order/modules/feedback.vue

+<template>
+  <el-dialog
+    v-model="show"
+    width="774px"
+    top="10vh"
+    :before-close="beforeClose"
+    :close-on-click-modal="false"
+  >
+    <template #header>
+      <GapTitle title="处置反馈"></GapTitle>
+    </template>
+    <div class="feedback-body">
+      <el-form
+        :model="state.form"
+        ref="form"
+        :rules="state.rules"
+        label-width="80px"
+      >
+        <el-form-item label="预警状态" prop="status">
+          <el-radio-group v-model="state.form.status">
+            <el-radio v-for="(value, key) in status" :key="key" :label="key">
+              {{ value }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="结果反馈" prop="result">
+          <el-input
+            type="textarea"
+            v-model="state.form.result"
+            rows="5"
+            placeholder="请输入结果反馈"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <el-button size="default" @click="Close">关闭</el-button>
+      <el-button type="primary" size="default" @click="Submit">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { computed, reactive, ref } from "vue";
+import GapTitle from "@/components/gap-title.vue";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  beforeClose: {
+    type: Function,
+    default: () => {},
+  },
+  active_row: {
+    type: Object,
+    default: null,
+  },
+});
+const state = reactive({
+  form: {
+    status: "",
+    result: "",
+  },
+  rules: {
+    status: [{ required: true, message: "请选择预警状态", trigger: "change" }],
+    result: [{ required: true, message: "请输入结果反馈", trigger: "blur" }],
+  },
+});
+const status = {
+  1: "未恢复",
+  2: "已恢复",
+};
+const emits = defineEmits(["update:visible"]);
+const form = ref(null);
+const Close = () => {
+  form.value.resetFields();
+  emits("update:visible", false);
+};
+const show = computed({
+  get() {
+    return props.visible;
+  },
+  set() {
+    Close();
+  },
+});
+const beforeClose = () => {
+  props.beforeClose();
+  Close();
+};
+const Submit = () => {
+  form.value.validate((valid) => {
+    if (valid) {
+      console.log(state.form);
+    } else {
+      return false;
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.feedback-body {
+  text-align: left;
+  padding: 24px 16px 0;
+}
+</style>

src/page/main/work-order/my-business-work-order/detail.vue

+<template>
+  <div>my-business-detail</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>