diff --git a/src/views/task-management/all-work-order/index.vue b/src/views/task-management/all-work-order/index.vue
index fe3efe4..47a9245 100644
--- a/src/views/task-management/all-work-order/index.vue
+++ b/src/views/task-management/all-work-order/index.vue
@@ -1,13 +1,18 @@
 <template>
-  <fvSearchForm :searchConfig="searchConfig" @search="search"></fvSearchForm>
+  <fvSearchForm :searchConfig="searchConfig" @search="search">
+    <FvSelect></FvSelect>
+  </fvSearchForm>
   <fvTable ref="tableIns" :tableConfig="tableConfig" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
-  <WorkEdit ref="workEditRef"></WorkEdit>
+  <WorkDialog ref="workDialogRef"></WorkDialog>
+  
 </template>
 
 <script setup lang="jsx">
-import WorkEdit from '../components/WorkEdit.vue';
+import { shallowRef } from 'vue';
+import fvSelect from '@/fvcomponents/fvSelect/index.vue'
+import WorkDialog from '../components/WorkDialog.vue';
 
-const workEditRef = ref()
+const workDialogRef = ref()
 const router = useRouter()
 const tableIns = ref()
 //todo 外部模拟数据, 接口一出来, 直接在下方 tableConfig 的api处填写就行
@@ -51,10 +56,11 @@ const searchConfig = reactive([
     prop: 'requirementName',
     props: {
       placeholder: '请输入工单状态查询',
+      cacheKey: 'work_order_state',
       clearable: true,
-      checkStrictly: true
+      filterable: true,
     },
-    component: 'el-input',
+    component: shallowRef(fvSelect),
   }, {
     label: '处理人',
     prop: 'requirementName',
@@ -78,7 +84,7 @@ const searchConfig = reactive([
     label: '创建日期',
     prop: 'requirementName',
     props: {
-      placeholder: '',
+      placeholder: '请选择',
       clearable: true,
       checkStrictly: true
     },
@@ -87,7 +93,7 @@ const searchConfig = reactive([
     label: '处理时间',
     prop: 'requirementName',
     props: {
-      placeholder: '',
+      placeholder: '请选择',
       clearable: true,
       checkStrictly: true
     },
@@ -96,7 +102,7 @@ const searchConfig = reactive([
     label: '完成时间',
     prop: 'requirementName',
     props: {
-      placeholder: '',
+      placeholder: '请选择',
       clearable: true,
       checkStrictly: true
     },
@@ -230,7 +236,7 @@ const headBtnClick = (key) => {
 }
 
 const handleDetail = (row) => {
-  workEditRef.value.open(row)
+  workDialogRef.value.open(row)
 }
 
 const handleClose = (row) => {
diff --git a/src/views/task-management/components/WorkDialog.vue b/src/views/task-management/components/WorkDialog.vue
new file mode 100644
index 0000000..96aec4b
--- /dev/null
+++ b/src/views/task-management/components/WorkDialog.vue
@@ -0,0 +1,229 @@
+<script setup>
+import { ref } from "vue";
+import { ElMessageBox } from "element-plus";
+import { MoreFilled } from "@element-plus/icons-vue";
+import { time } from "echarts";
+//控制显示隐藏
+const dialogVisible = ref(false);
+const open = (row) => {
+    dialogVisible.value = true;
+    console.log(row);
+};
+
+const test = [
+    {
+        content: "待处理",
+        timestamp: "2022-07-20 20:00",
+        color: "#0bbd87",
+    },
+    {
+        content: "已处理",
+        timestamp: "2022-07-20 20:00",
+        type: "primary",
+        icon: MoreFilled,
+        size: "large",
+    },
+    {
+        content: "结单",
+        timestamp: "2022-07-20 20:00",
+        size: "large",
+    },
+];
+
+const test2 = [
+    {
+
+        date: '2024-8-31',
+        type: "primary",
+        icon: MoreFilled,
+        size: "large",
+    }, {
+        content: "结单",
+        size: "large",
+    }
+];
+const data = [
+    {
+        number: '17628661307',
+        state: '通话中',
+        time: '18 : 32',
+    },
+    {
+        number: '17628661307',
+        state: '已接通',
+        time: '18 : 32',
+    },
+    {
+        number: '17628661307',
+        state: '已接通',
+        time: '18 : 32',
+    }]
+
+defineExpose({
+    open,
+});
+</script>
+
+<template>
+    <el-dialog v-model="dialogVisible" show-close="true" title="工单详情" width="80%" :before-close="handleClose" overflow:
+        auto>
+        <div class="common-layout">
+            <el-container>
+                <el-header class="header"><span>工单号 :</span>
+                    <span>666</span>
+                </el-header>
+                <el-container class="main-container">
+                    <el-aside width="200px" :style="{ position: 'static' }">
+                        <div class="aside-content">
+                            <el-timeline style="max-width: 600px">
+                                <el-timeline-item v-for="(activity, index) in test" :key="index" :icon="activity.icon"
+                                    :type="activity.type" :color="activity.color" :size="activity.size"
+                                    :hollow="activity.hollow" :timestamp="activity.timestamp">
+                                    {{ activity.content }}
+                                </el-timeline-item>
+                            </el-timeline>
+                        </div>
+                    </el-aside>
+                    <el-main :style="{ position: 'static' }" class="main-content">
+                        <div class="top">
+                            <div class="info">
+                                <span>创始人 :</span>
+                                <span>处理人 :</span>
+                            </div>
+                            <div class="info">
+                                <span>工单名称 :</span>
+                                <span>关单人 :</span>
+                            </div>
+                        </div>
+                        <div class="body">
+                            <div>
+                                <div>工单内容 :</div>
+                                <div class="text"></div>
+
+                            </div>
+                            <div>
+                                <div>工单内容 :</div>
+                                <div class="text"></div>
+
+                            </div>
+                            <div>
+                                <div>工单内容 :</div>
+                                <div class="text"></div>
+
+                            </div>
+                        </div>
+                        <div class="footer">
+                            <div>电话拨打记录 :</div>
+                            <div class="timebox">
+                                <div>
+                                    <el-scrollbar height="20vh">
+                                        <el-timeline style="max-width: 99%" class="timeline">
+                                            <el-timeline-item v-for="(activity, index) in test2" :key="index"
+                                                :icon="activity.icon" :type="activity.type" :color="activity.color"
+                                                :size="activity.size">
+                                                <div class="custom-card">
+                                                    <div>{{ activity.date }}</div>
+                                                    <div v-for="(info, index) in data" :key="index">
+                                                        <div>
+                                                            <span :style="{color:'#a8abb2'}">{{ info.number }}</span>
+                                                            <span :style="{ color: info.state === '通话中' ? '#6cc23a' : '#409eff' }">{{ info.state }}</span>
+                                                            <span class="span-3th" :style="{color:'#a8abb2'}">{{ info.time }}</span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </el-timeline-item>
+                                        </el-timeline>
+                                    </el-scrollbar>
+                                </div>
+                            </div>
+                        </div>
+
+                    </el-main>
+                </el-container>
+            </el-container>
+        </div>
+    </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.header {
+    font-size: 27px;
+    color: black;
+}
+
+.aside-content {
+    position: relative;
+    left: 3px;
+}
+
+.main-content {
+    background-color: white;
+
+}
+
+.main-content span {
+    padding-bottom: 5px;
+    color: black;
+    display: inline-block;
+    width: 50%;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.main-content .info {
+    border-bottom: 1.5px solid #e4e7ed;
+    margin-bottom: 50px
+}
+
+.main-content .body {
+    font-size: 17px;
+    color: black
+}
+
+.main-content .body .text {
+    width: 100%;
+    height: 10vh;
+    border: 1.5px solid #e4e7ed;
+    resize: none;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
+}
+
+.main-content .footer {
+    color: black;
+    font-size: 17px;
+}
+
+.main-content .timebox {
+    width: 100%;
+    height: 25vh;
+    border: 1.5px solid #e4e7ed;
+    padding-left: 20px;
+    padding-top: 20px;
+    box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
+    // overflow-x: hidden;
+}
+
+.main-content .timeline {
+    // width: 100%;
+    position: relative;
+    left: 3px;
+    // background-color: red;
+    
+}
+
+.custom-card{
+    width: 100%;
+    font-size: 16px;
+}
+.custom-card span {
+    padding-top: 10px;
+    width: 20%;
+    margin: 2px;
+    
+}
+
+.custom-card .span-3th {
+    float: right;
+}
+</style>
diff --git a/src/views/task-management/components/WorkEdit.vue b/src/views/task-management/components/WorkEdit.vue
deleted file mode 100644
index a12e29d..0000000
--- a/src/views/task-management/components/WorkEdit.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { ElDrawer } from 'element-plus'
-
-//控制显示隐藏
-const visible = ref(false)
-const open = (row) => {
-    visible.value = true
-    console.log(111);
-    
-    console.log(row);
-}
-defineExpose({
-    open
-})
-</script>
-
-<template>
-    <el-drawer v-model="visible" 
-    size="50%"
-    title="工单详情" :direction="direction" :before-close="handleClose">
-        <span>Hi, there!</span>
-    </el-drawer>
-</template>
-
-<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/task-management/historical-work-order/index.vue b/src/views/task-management/historical-work-order/index.vue
index 9b363b5..47a9245 100644
--- a/src/views/task-management/historical-work-order/index.vue
+++ b/src/views/task-management/historical-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>
diff --git a/src/views/task-management/pending-work-order/index.vue b/src/views/task-management/pending-work-order/index.vue
index 6816e97..47a9245 100644
--- a/src/views/task-management/pending-work-order/index.vue
+++ b/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>