feat:完成了详情页面样式，完成了历史工单、待处理工单,增添了日期框提示信息

src/views/task-management/pending-work-order/index.vue

@@ -1,13 +1,291 @@
 <template>
-待处理工单
+  <fvSearchForm :searchConfig="searchConfig" @search="search">
+    <FvSelect></FvSelect>
+  </fvSearchForm>
+  <fvTable ref="tableIns" :tableConfig="tableConfig" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
+  <WorkDialog ref="workDialogRef"></WorkDialog>
+  
 </template>
 
-<script>
-export default {
-  name: "index"
+<script setup lang="jsx">
+import { shallowRef } from 'vue';
+import fvSelect from '@/fvcomponents/fvSelect/index.vue'
+import WorkDialog from '../components/WorkDialog.vue';
+
+const workDialogRef = ref()
+const router = useRouter()
+const tableIns = ref()
+//todo 外部模拟数据, 接口一出来, 直接在下方 tableConfig 的api处填写就行
+const mockData = ref([
+  {
+    workOrderNumber: 1211,
+    workOrderTime: '2022-02-09 00 : 12',
+    state: 0,
+    callState: 0
+  },
+  {
+    workOrderNumber: 232,
+    state: 1,
+    callState: 1
+  }
+])
+const auths = reactive({
+  report: ['mosr:collect:reported'],
+})
+const searchConfig = reactive([
+  {
+    label: '工单号',
+    prop: 'requirementName',
+    props: {
+      placeholder: '请输入工单号查询',
+      clearable: true,
+      checkStrictly: true
+    },
+    component: 'el-input',
+  }, {
+    label: '工单名称',
+    prop: 'requirementName',
+    props: {
+      placeholder: '请输入工单名查询',
+      clearable: true,
+      checkStrictly: true
+    },
+    component: 'el-input',
+  }, {
+    label: '工单状态',
+    prop: 'requirementName',
+    props: {
+      placeholder: '请输入工单状态查询',
+      cacheKey: 'work_order_state',
+      clearable: true,
+      filterable: true,
+    },
+    component: shallowRef(fvSelect),
+  }, {
+    label: '处理人',
+    prop: 'requirementName',
+    props: {
+      placeholder: '请输入处理人查询',
+      clearable: true,
+      checkStrictly: true
+    },
+    component: 'el-input',
+  }, {
+    label: '关单人',
+    prop: 'requirementName',
+    props: {
+      placeholder: '请输入关单人查询',
+      clearable: true,
+      checkStrictly: true
+    },
+    component: 'el-input',
+  },
+  {
+    label: '创建日期',
+    prop: 'requirementName',
+    props: {
+      placeholder: '请选择',
+      clearable: true,
+      checkStrictly: true
+    },
+    component: 'el-date-picker',
+  }, {
+    label: '处理时间',
+    prop: 'requirementName',
+    props: {
+      placeholder: '请选择',
+      clearable: true,
+      checkStrictly: true
+    },
+    component: 'el-date-picker',
+  }, {
+    label: '完成时间',
+    prop: 'requirementName',
+    props: {
+      placeholder: '请选择',
+      clearable: true,
+      checkStrictly: true
+    },
+    component: 'el-date-picker',
+  }
+])
+
+const tableConfig = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: 80,
+    },
+    {
+      prop: 'workOrderNumber',
+      label: '工单号',
+      align: 'center'
+    },
+    {
+      prop: 'workOrderNumber',
+      label: '工单名称',
+      align: 'center'
+    },
+    {
+      prop: 'workOrderNumber',
+      label: '工单内容',
+      align: 'center'
+    },
+    {
+      prop: 'state',
+      label: '工单状态',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({ row, index }) => {
+        if (row.state !== null) {
+          return (<Tag dictType={'work_order_status'} value={row.state} />)
+        } else {
+          return '--'
+        }
+      }
+    },
+    {
+      prop: 'callState',
+      label: '电话拨打状态',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({ row, index }) => {
+        if (row.callState !== null) {
+          return (<Tag dictType={'call_status'} value={row.callState} />)
+        } else {
+          return '--'
+        }
+      }
+    },
+    {
+      prop: 'workOrderNumber',
+      label: '处理人',
+      align: 'center'
+    },
+    {
+      prop: 'workOrderNumber',
+      label: '处理内容',
+      align: 'center'
+    },
+    {
+      prop: 'workOrderTime',
+      label: '创建时间',
+      align: 'center',
+      width: 200
+    },
+    {
+      prop: 'workOrderTime',
+      label: '处理时间',
+      align: 'center',
+      width: 200
+    },
+    {
+      prop: 'workOrderTime',
+      label: '完成时间',
+      align: 'center',
+      width: 200
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      fixed: 'right',
+      width: 150,
+      showOverflowTooltip: false,
+      currentRender: ({ row, index }) => {
+        let btn = []
+        btn.push({ label: '详情', prem: auths.detail, func: () => handleDetail(row), type: 'primary' })
+        btn.push({ label: '关单', prem: auths.detail, func: () => handleClose(row), type: 'primary' })
+        btn.push({ label: '删除', prem: auths.detail, func: () => handleDelete(row), type: 'primary' })
+        return (
+          <div style={{ width: '100%' }}>
+            {
+              btn.map(item => (
+                <el-button
+                  type={item.type}
+                  // v-perm={item.prem}
+                  onClick={() => item.func()}
+                  link
+                >
+                  {item.label}
+                </el-button>
+              ))
+            }
+          </div>
+        )
+      }
+    }
+  ],
+  api: '',
+  params: {},
+  btns: [
+    // {name: '新增', key: 'add', color: '#DED0B2', auth: auths.report},
+  ]
+})
+const headBtnClick = (key) => {
+  console.log(key);
+
+  switch (key) {
+    case 'add':
+      handleAdd()
+      break;
+  }
+}
+
+const handleDetail = (row) => {
+  workDialogRef.value.open(row)
+}
+
+const handleClose = (row) => {
+  ElMessageBox.confirm(
+    '确定要关单吗?',
+    '温馨提示',
+    {
+      confirmButtonText: 'OK',
+      cancelButtonText: 'Cancel',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: '关闭成功',
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '关闭失败',
+      })
+    })
+}
+
+const handleDelete = (row) => {
+  ElMessageBox.confirm(
+    '确定要删除吗?',
+    '温馨提示',
+    {
+      confirmButtonText: 'OK',
+      cancelButtonText: 'Cancel',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: '删除成功',
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '删除失败',
+      })
+    })
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>