feat:完成了6个搜索form，完成了table中工单号，工单名称等添加，完成了关闭与删除的box弹窗，正在封装详情Edit组件

src/fvcomponents/fvSearchForm/index.vue

@@ -33,7 +33,7 @@
           <el-button v-if="searchConfig.length>=4" link type="primary" @click="showMore = !showMore">
             {{ showMore ? '收起' : '展开' }}
           </el-button>
-          <el-button type="primary" @click="getValues" :icon="Search">搜索</el-button>
+          <el-button type="primary" @click="getValues" :icon="Search">查询</el-button>
           <el-button @click="handleReset" :icon="Refresh">重置</el-button>
         </el-form-item>
       </el-col>

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

@@ -1,24 +1,28 @@
 <template>
   <fvSearchForm :searchConfig="searchConfig" @search="search"></fvSearchForm>
   <fvTable ref="tableIns" :tableConfig="tableConfig" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
+  <WorkEdit ref="workEditRef"></WorkEdit>
 </template>
 
 <script setup lang="jsx">
+import WorkEdit from '../components/WorkEdit.vue';
 
+const workEditRef = ref()
 const router = useRouter()
 const tableIns = ref()
 //todo 外部模拟数据, 接口一出来, 直接在下方 tableConfig 的api处填写就行
-const mockData=ref([
+const mockData = ref([
   {
-    workOrderNumber:1211,
-    state:0,
-    callState:0
+    workOrderNumber: 1211,
+    workOrderTime: '2022-02-09 00 : 12',
+    state: 0,
+    callState: 0
   },
   {
-    workOrderNumber:232,
-    state:1,
-    callState:1
-  },
+    workOrderNumber: 232,
+    state: 1,
+    callState: 1
+  }
 ])
 const auths = reactive({
   report: ['mosr:collect:reported'],
@@ -33,8 +37,73 @@ const searchConfig = reactive([
       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-input',
+  }, {
+    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: [
     {
@@ -49,14 +118,24 @@ const tableConfig = reactive({
       label: '工单号',
       align: 'center'
     },
+    {
+      prop: 'workOrderNumber',
+      label: '工单名称',
+      align: 'center'
+    },
+    {
+      prop: 'workOrderNumber',
+      label: '工单内容',
+      align: 'center'
+    },
     {
       prop: 'state',
       label: '工单状态',
       align: 'center',
       showOverflowTooltip: false,
-      currentRender: ({row, index}) => {
+      currentRender: ({ row, index }) => {
         if (row.state !== null) {
-          return (<Tag dictType={'work_order_status'} value={row.state}/>)
+          return (<Tag dictType={'work_order_status'} value={row.state} />)
         } else {
           return '--'
         }
@@ -67,14 +146,42 @@ const tableConfig = reactive({
       label: '电话拨打状态',
       align: 'center',
       showOverflowTooltip: false,
-      currentRender: ({row, index}) => {
+      currentRender: ({ row, index }) => {
         if (row.callState !== null) {
-          return (<Tag dictType={'call_status'} value={row.callState}/>)
+          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: '操作',
@@ -82,24 +189,26 @@ const tableConfig = reactive({
       fixed: 'right',
       width: 150,
       showOverflowTooltip: false,
-      currentRender: ({row, index}) => {
+      currentRender: ({ row, index }) => {
         let btn = []
-        btn.push({label: '详情', prem: auths.detail, func: () => handleDetail(row), type: 'primary'})
+        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>
+          <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>
         )
       }
     }
@@ -111,14 +220,66 @@ const tableConfig = reactive({
   ]
 })
 const headBtnClick = (key) => {
+  console.log(key);
+
   switch (key) {
     case 'add':
       handleAdd()
       break;
   }
 }
+
+const handleDetail = (row) => {
+  workEditRef.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>

src/views/task-management/components/WorkEdit.vue

@@ -0,0 +1,26 @@
+<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>