fix

src/api/system/task.js

@@ -1,44 +1,62 @@
-import request from '@/utils/request'
-
-// 查询工单任务列表
-export function listTask(query) {
-  return request({
-    url: '/system/task/list',
-    method: 'get',
-    params: query
-  })
-}
-
-// 查询工单任务详细
-export function getTask(taskId) {
-  return request({
-    url: '/system/task/' + taskId,
-    method: 'get'
-  })
-}
-
-// 新增工单任务
-export function addTask(data) {
-  return request({
-    url: '/system/task',
-    method: 'post',
-    data: data
-  })
-}
-
-// 修改工单任务
-export function updateTask(data) {
-  return request({
-    url: '/system/task',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除工单任务
-export function delTask(taskId) {
-  return request({
-    url: '/system/task/' + taskId,
-    method: 'delete'
-  })
-}
+import request from '@/utils/request'
+
+// 查询工单任务列表
+export function listTask(query) {
+    return request({
+        url: '/system/task/list',
+        method: 'get',
+        params: query
+    })
+}
+
+// 查询工单任务详细
+export function getTask(taskId) {
+    return request({
+        url: '/system/task/' + taskId,
+        method: 'get'
+    })
+}
+
+// 新增工单任务
+export function addTask(data) {
+    return request({
+        url: '/system/task',
+        method: 'post',
+        data: data
+    })
+}
+
+// 修改工单任务
+export function updateTask(data) {
+    return request({
+        url: '/system/task',
+        method: 'put',
+        data: data
+    })
+}
+
+// 删除工单任务
+export function delTask(taskId) {
+    return request({
+        url: '/system/task/' + taskId,
+        method: 'delete'
+    })
+}
+
+// 派发工单任务
+export function distributedTask(data) {
+    return request({
+        url: "/system/task/distributed",
+        method: "post",
+        data: data
+    });
+}
+
+// 派发工单任务
+export function closeTask(data) {
+    return request({
+        url: "/system/task/close",
+        method: "post",
+        data: data
+    });
+}

src/components/FileUpload/index.vue

@@ -1,199 +1,199 @@
-<template>
-  <div class="upload-file">
-    <el-upload
-      multiple
-      :action="uploadFileUrl"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      :on-success="handleUploadSuccess"
-      :show-file-list="false"
-      :headers="headers"
-      class="upload-file-uploader"
-      ref="upload"
-    >
-      <!-- 上传按钮 -->
-      <el-button type="primary">选取文件</el-button>
-    </el-upload>
-    <!-- 上传提示 -->
-    <div class="el-upload__tip" v-if="showTip">
-      请上传
-      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
-      的文件
-    </div>
-    <!-- 文件列表 -->
-    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
-      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
-        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
-          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
-        </el-link>
-        <div class="ele-upload-list__item-content-action">
-          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
-        </div>
-      </li>
-    </transition-group>
-  </div>
-</template>
-
-<script setup>
-import { getToken } from "@/utils/auth";
-
-const props = defineProps({
-  modelValue: [String, Object, Array],
-  // 数量限制
-  limit: {
-    type: Number,
-    default: 5,
-  },
-  // 大小限制(MB)
-  fileSize: {
-    type: Number,
-    default: 5,
-  },
-  // 文件类型, 例如['png', 'jpg', 'jpeg']
-  fileType: {
-    type: Array,
-    default: () => ["doc", "xls", "ppt", "txt", "pdf"],
-  },
-  // 是否显示提示
-  isShowTip: {
-    type: Boolean,
-    default: true
-  }
-});
-
-const { proxy } = getCurrentInstance();
-const emit = defineEmits();
-const number = ref(0);
-const uploadList = ref([]);
-const baseUrl = import.meta.env.VITE_APP_BASE_API;
-const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
-const headers = ref({ Authorization: "Bearer " + getToken() });
-const fileList = ref([]);
-const showTip = computed(
-  () => props.isShowTip && (props.fileType || props.fileSize)
-);
-
-watch(() => props.modelValue, val => {
-  if (val) {
-    let temp = 1;
-    // 首先将值转为数组
-    const list = Array.isArray(val) ? val : props.modelValue.split(',');
-    // 然后将数组转为对象数组
-    fileList.value = list.map(item => {
-      if (typeof item === "string") {
-        item = { name: item, url: item };
-      }
-      item.uid = item.uid || new Date().getTime() + temp++;
-      return item;
-    });
-  } else {
-    fileList.value = [];
-    return [];
-  }
-},{ deep: true, immediate: true });
-
-// 上传前校检格式和大小
-function handleBeforeUpload(file) {
-  // 校检文件类型
-  if (props.fileType.length) {
-    let fileExtension = "";
-    if (file.name.lastIndexOf(".") > -1) {
-      fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
-    }
-    const isTypeOk = props.fileType.some((type) => {
-      if (file.type.indexOf(type) > -1) return true;
-      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-      return false;
-    });
-    if (!isTypeOk) {
-      proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);
-      return false;
-    }
-  }
-  // 校检文件大小
-  if (props.fileSize) {
-    const isLt = file.size / 1024 / 1024 < props.fileSize;
-    if (!isLt) {
-      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
-      return false;
-    }
-  }
-  proxy.$modal.loading("正在上传文件，请稍候...");
-  number.value++;
-  return true;
-}
-
-// 文件个数超出
-function handleExceed() {
-  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
-}
-
-// 上传失败
-function handleUploadError(err) {
-  proxy.$modal.msgError("上传文件失败");
-}
-
-// 上传成功回调
-function handleUploadSuccess(res, file) {
-  uploadList.value.push({ name: res.fileName, url: res.fileName });
-  if (uploadList.value.length === number.value) {
-    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
-    uploadList.value = [];
-    number.value = 0;
-    emit("update:modelValue", listToString(fileList.value));
-    proxy.$modal.closeLoading();
-  }
-}
-
-// 删除文件
-function handleDelete(index) {
-  fileList.value.splice(index, 1);
-  emit("update:modelValue", listToString(fileList.value));
-}
-
-// 获取文件名称
-function getFileName(name) {
-  if (name.lastIndexOf("/") > -1) {
-    return name.slice(name.lastIndexOf("/") + 1);
-  } else {
-    return "";
-  }
-}
-
-// 对象转成指定字符串分隔
-function listToString(list, separator) {
-  let strs = "";
-  separator = separator || ",";
-  for (let i in list) {
-    if(undefined !== list[i].url) {
-      strs += list[i].url + separator;
-    }
-  }
-  return strs != '' ? strs.substr(0, strs.length - 1) : '';
-}
-</script>
-
-<style scoped lang="scss">
-.upload-file-uploader {
-  margin-bottom: 5px;
-}
-.upload-file-list .el-upload-list__item {
-  border: 1px solid #e4e7ed;
-  line-height: 2;
-  margin-bottom: 10px;
-  position: relative;
-}
-.upload-file-list .ele-upload-list__item-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: inherit;
-}
-.ele-upload-list__item-content-action .el-link {
-  margin-right: 10px;
-}
-</style>
+<template>
+  <div class="upload-file">
+    <el-upload
+      multiple
+      :action="uploadFileUrl"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileList"
+      :limit="limit"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :on-success="handleUploadSuccess"
+      :show-file-list="false"
+      :headers="headers"
+      class="upload-file-uploader"
+      ref="upload"
+    >
+      <!-- 上传按钮 -->
+      <el-button type="primary">选取文件</el-button>
+    </el-upload>
+    <!-- 上传提示 -->
+    <div class="el-upload__tip" v-if="showTip">
+      请上传
+      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+      的文件
+    </div>
+    <!-- 文件列表 -->
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
+        </div>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script setup>
+import { getToken } from "@/utils/auth";
+
+const props = defineProps({
+  modelValue: [String, Object, Array],
+  // 数量限制
+  limit: {
+    type: Number,
+    default: 5,
+  },
+  // 大小限制(MB)
+  fileSize: {
+    type: Number,
+    default: 5,
+  },
+  // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileType: {
+    type: Array,
+    default: () => ["doc","docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf"],
+  },
+  // 是否显示提示
+  isShowTip: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const { proxy } = getCurrentInstance();
+const emit = defineEmits();
+const number = ref(0);
+const uploadList = ref([]);
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
+const headers = ref({ Authorization: "Bearer " + getToken() });
+const fileList = ref([]);
+const showTip = computed(
+  () => props.isShowTip && (props.fileType || props.fileSize)
+);
+
+watch(() => props.modelValue, val => {
+  if (val) {
+    let temp = 1;
+    // 首先将值转为数组
+    const list = Array.isArray(val) ? val : props.modelValue.split(',');
+    // 然后将数组转为对象数组
+    fileList.value = list.map(item => {
+      if (typeof item === "string") {
+        item = { name: item, url: item };
+      }
+      item.uid = item.uid || new Date().getTime() + temp++;
+      return item;
+    });
+  } else {
+    fileList.value = [];
+    return [];
+  }
+},{ deep: true, immediate: true });
+
+// 上传前校检格式和大小
+function handleBeforeUpload(file) {
+  // 校检文件类型
+  if (props.fileType.length) {
+    let fileExtension = "";
+    if (file.name.lastIndexOf(".") > -1) {
+      fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+    }
+    const isTypeOk = props.fileType.some((type) => {
+      if (file.type.indexOf(type) > -1) return true;
+      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+      return false;
+    });
+    if (!isTypeOk) {
+      proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);
+      return false;
+    }
+  }
+  // 校检文件大小
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+      return false;
+    }
+  }
+  proxy.$modal.loading("正在上传文件，请稍候...");
+  number.value++;
+  return true;
+}
+
+// 文件个数超出
+function handleExceed() {
+  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
+}
+
+// 上传失败
+function handleUploadError(err) {
+  proxy.$modal.msgError("上传文件失败");
+}
+
+// 上传成功回调
+function handleUploadSuccess(res, file) {
+  uploadList.value.push({ name: res.fileName, url: res.fileName });
+  if (uploadList.value.length === number.value) {
+    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
+    uploadList.value = [];
+    number.value = 0;
+    emit("update:modelValue", listToString(fileList.value));
+    proxy.$modal.closeLoading();
+  }
+}
+
+// 删除文件
+function handleDelete(index) {
+  fileList.value.splice(index, 1);
+  emit("update:modelValue", listToString(fileList.value));
+}
+
+// 获取文件名称
+function getFileName(name) {
+  if (name.lastIndexOf("/") > -1) {
+    return name.slice(name.lastIndexOf("/") + 1);
+  } else {
+    return "";
+  }
+}
+
+// 对象转成指定字符串分隔
+function listToString(list, separator) {
+  let strs = "";
+  separator = separator || ",";
+  for (let i in list) {
+    if(undefined !== list[i].url) {
+      strs += list[i].url + separator;
+    }
+  }
+  return strs != '' ? strs.substr(0, strs.length - 1) : '';
+}
+</script>
+
+<style scoped lang="scss">
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+}
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+</style>

src/components/ImagePreview/index.vue

@@ -42,9 +42,11 @@ const realSrc = computed(() => {
 });
 
 const realSrcList = computed(() => {
-  let real_src_list = props.src.split(",");
+
+
+  let real_src_list = (props.src??'') .split(",");
   let srcList = [];
-  real_src_list.forEach(item => {
+  ((real_src_list==null||real_src_list==""?[]:real_src_list)).forEach(item => {
     if (isExternal(item)) {
       return srcList.push(item);
     }

src/components/MapSelect/index.jsx

@@ -45,10 +45,27 @@ export default defineComponent({
       () => props.formv.locations,
       () => {
         form.value = props.formv;
-        setpoint(
-          Number(form.value.locations.split(',')[0]),
-          Number(form.value.locations.split(',')[1]),
-          form.value.addr);
+        if (form.value.locations !== '') {
+          setpoint(
+            Number(form.value.locations.split(',')[0]),
+            Number(form.value.locations.split(',')[1]),
+            form.value.addr);
+
+        } else {
+          mapselect.value = true;
+          var clearallmark = () => {
+            state._marker?.remove();
+            if (allmark.length > 0) {
+              allmark.map((item) => {
+                item.remove();
+              });
+              allmark = [];
+            }
+          };
+          clearallmark();
+
+        }
+
       },
     );
 

src/components/Task/Add/index.vue

@@ -12,11 +12,11 @@
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="班组区域:">
-                        <el-tree-select v-model="taskinfo.taskDeptRange"  multiple :data="treedept" check-strictly=true  />
+                        <el-tree-select v-model="taskinfo.taskDeptRange" multiple :data="treedept" check-strictly=true />
 
                         <!-- <el-select v-model="taskinfo.taskDeptRange" class="m-1" placeholder="请选择">
-                            <el-option v-for="item in alldept" :label="item.deptName" :value="item.deptId"></el-option>
-                        </el-select> -->
+                                <el-option v-for="item in alldept" :label="item.deptName" :value="item.deptId"></el-option>
+                            </el-select> -->
                     </el-form-item>
                 </el-col>
 
@@ -86,7 +86,15 @@
                         <el-input v-model="taskinfo.taskOtherId" />
                     </el-form-item>
                 </el-col>
-                 <el-col :span="24">
+                <el-col :span="12">
+                    <el-form-item label="行政区属:">
+
+                        <el-select v-model="taskinfo.taskArea" class="m-1" placeholder="请选择">
+                            <el-option v-for="item in sys_area" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="24">
                     <el-form-item label="备注">
                         <el-input type="textarea" v-model="taskinfo.remark" />
                     </el-form-item>
@@ -122,7 +130,6 @@
                 <el-col :span="12">
                     <div style="padding-left:120px">
                         <ImageUpload v-model="fileList"></ImageUpload>
-
                     </div>
 
                 </el-col>
@@ -138,8 +145,8 @@
     </div>
 </template>
 
-<script setup>
-import { ref, watch } from 'vue'
+<script lang="ts">
+import { ref, watch, defineComponent,onMounted } from 'vue'
 import { useDict } from '@/utils/dict';
 import { cloneDeep } from 'lodash';
 import { listDept, getDept } from "@/api/system/dept";
@@ -147,89 +154,98 @@ import MapSelect from '@/components/MapSelect';
 import { Plus } from '@element-plus/icons-vue'
 // 文件上传组件
 import ImageUpload from "@/components/ImageUpload"
-import { treeselect as deptTreeselect} from "@/api/system/dept";
+import { treeselect as deptTreeselect } from "@/api/system/dept";
+
 
 
-const mapSelect = ref(null);
-const formlocation = ref({ addr: '', locations: '' });
 
-watch(
-    () => formlocation.value.addr,
-    () => {
-        taskinfo.value.taskAddr = formlocation.value.addr;
+export default defineComponent({
+    name: 'taskadd',
+    components:{MapSelect},
+    props:{
+      taskinfo:Object
     },
-);
-watch(
-    () => formlocation.value.locations,
-    () => {
-        taskinfo.value.taskLocation = formlocation.value.locations;
+    setup(props,context) {
+        const mapSelect = ref(null);
+        const formlocation = ref({ addr: '', locations: '' });
+        const { task_status, task_type, task_event_type, task_event_category,sys_area } = useDict("task_status", "task_type", "task_event_type", "task_event_category","sys_area");
+
+        watch(
+            () => formlocation.value.addr,
+            () => {
+                taskinfo.value.taskAddr = formlocation.value.addr;
+            },
+        );
+        watch(
+            () => formlocation.value.locations,
+            () => {
+                taskinfo.value.taskLocation = formlocation.value.locations;
+            },
+        );
+
+        const searchaddr = () => {
+
+            if (taskinfo.value.taskAddr) {
+                mapSelect.value.searchaddr(taskinfo.value.taskAddr);
+            } else {
+                ElMessage.warning('请输入地址');
+            }
+
+        };
+        const alldept = ref([]);
+        listDept().then(response => {
+            alldept.value = cloneDeep(response.data);
+        });
+
+        const doinit=()=>{
+           taskinfo.value = props.taskinfo;
+          fileList.value =[];
+          formlocation.value = { addr: '', locations: '' };
+
+        }
+        onMounted(()=>{
+        //  doinit();
+        })
+
+
+        const fileList = ref([]);
+
+        function setdatakey(dept) {
+            if (dept.children) {
+                dept.children = dept.children.map(i => { return setdatakey(i) });
+            }
+            dept["value"] = dept.id;
+            return dept;
+        }
+
+        const treedept = ref([{
+            value: "1",
+            label: 'ss'
+        }, {
+            value: "2",
+            label: 'ss1'
+        }]);
+        deptTreeselect().then(res => {
+            treedept.value = [setdatakey(res.data[0])];
+
+        })
+
+
+
+
+        const taskinfo = ref({
+        })
+          watch(()=>taskinfo,()=>{
+            context.emit("update:taskinfo",taskinfo.value)
+        },{deep:true})
+        return {mapSelect,MapSelect,formlocation,taskinfo,searchaddr,alldept,treedept,task_status, task_type, task_event_type, task_event_category,sys_area,fileList,doinit};
     },
-);
-
-
-const searchaddr = () => {
-
-    if (taskinfo.value.taskAddr) {
-        mapSelect.value.searchaddr(taskinfo.value.taskAddr);
-    } else {
-        ElMessage.warning('请输入地址');
-    }
-
-};
-const alldept = ref([]);
-listDept().then(response => {
-    alldept.value = cloneDeep(response.data);
-});
-const { task_status, task_type, task_event_type, task_event_category } = useDict("task_status", "task_type", "task_event_type", "task_event_category");
-
-
-
-const treedept = ref([{value:"1",label:
-'ss'},{value:"2",label:
-'ss1'}]);
-function setdatakey(dept){
-  if(dept.children){
-    dept.children =  dept.children.map(i=>{return setdatakey(i)});
-  }
-  dept["value"] = dept.id;
-  return dept;
-}
-deptTreeselect().then(res=>{
-      treedept.value = [setdatakey(res.data[0])];
-      console.log(treedept.value)
 })
+</script>
 
 
 
 
-const taskinfo = ref({
-
-    taskName: null,
-    taskContent: null,
-    taskAddr: null,
-    taskLocation: null,
-    taskCode: null,
-    taskType: null,
-    taskEventType: null,
-    taskEventCategory: null,
-    taskFromRemark: null,
-    taskAddrRoad: null,
-    taskOtherId: null,
-    taskTime: null,
-    taskReqCompleteTime: null,
-    status: 1,
-    remark:"ss",
-    taskCreater: null,
-    taskReporter: null,
-    taskPics: null,
-    taskVideos: null,
-    taskComplainConnect: null,
-    taskDeptRange: "",
-    taskFacilitieCode: "",
-    remark:""
-})
-</script>
-
 <style lang="scss" scoped>
 .taskadd {
     .el-select {

src/router/index.js

@@ -81,7 +81,7 @@ export const constantRoutes = [{
                 meta: { title: "任务列表", icon: "user" },
             },
             {
-                path: "detail",
+                path: "detail/:id",
                 component: () =>
                     import ("@/views/task/detail/index"),
                 name: "detail",

src/views/task/detail/index.vue

@@ -1,249 +1,649 @@
 <template>
-    <div style="padding:10px 15px">
-        <div class="taskdetail">
-            <div class="title">{{taskinfo.taskName}} 工单
-                <div class="btngroup">
-                    <el-button type="primary">派 发</el-button>
-                    <el-button type="primary">驳 回</el-button>
-                    <el-button type="primary">处 置</el-button>
-                    <el-button type="primary">审 核</el-button>
-                    <el-button type="primary">跟 踪</el-button>
-                    <el-button type="danger" @click="()=>{router.back()}">返回</el-button>
-                </div>
-            </div>
-            <div class="card">
-                <div class="title">工单信息</div>
-                <div class="body">
-                    <el-row>
-                        <el-col :span="6">事件来源：{{task_type.filter(i=>i.value===taskinfo.taskType)[0]?.label ?? '-'}}</el-col>
-                        <el-col :span="6">班组区域：{{ taskinfo.taskDeptRange.split(",").map(i=>{ return alldept.find(p=>{return (p.deptId+"")===(i+"")})?.deptName ?? '-' } ).join(",") }}</el-col>
-                        <el-col :span="6">来件时间：{{taskinfo.taskTime}}</el-col>
-                        <el-col :span="6">设施编号：{{taskinfo.taskFacilitieCode}}</el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="6">事件分类：{{task_event_type.filter(i=>i.value===taskinfo.taskEventType)[0]?.label ?? '-'}}</el-col>
-                        <el-col :span="6">其他工单号：{{taskinfo.taskOtherId}}</el-col>
-                        <el-col :span="6">要求完成时间：{{taskinfo.taskReqCompleteTime}}</el-col>
-                        <el-col :span="6">事件类型：{{task_event_category.filter(i=>i.value===taskinfo.taskEventCategory)[0]?.label ?? '-'}}</el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="6">来件备注：{{taskinfo.taskFromRemark}}</el-col>
-                        <el-col :span="6">投诉人电话：{{taskinfo.taskComplainConnect}}</el-col>
-                        <el-col :span="6">上报人：{{taskinfo.taskReporter}}</el-col>
-
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">详细地址：{{taskinfo.taskAddr}}</el-col>
-                        <el-col :span="12">备注信息：{{taskinfo.remark}}</el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">现场照片：</el-col>
-                        <el-col :span="12">任务内容：{{taskinfo.taskContent}}</el-col>
-                    </el-row>
-
-                    <el-row>
-                        <el-col :span="24">
-                            <ImagePreview v-model:src="taskinfo.taskPics" :height="'120px'" :width="'120px'"></ImagePreview>
-                        </el-col>
-
-                    </el-row>
-
-
-                </div>
-            </div>
-
-            <div class="card">
-                <div class="title">派发信息</div>
-                <div class="body">
-                    <el-row>
-                        <el-col :span="6">负责人：{{task_type.filter(i=>i.value===taskinfo.taskType)[0]?.label ?? '-'}}</el-col>
-                        <el-col :span="6">联系方式：{{ taskinfo.taskDeptRange.split(",").map(i=>{ return alldept.find(p=>{return (p.deptId+"")===(i+"")})?.deptName ?? '-' } ).join(",") }}</el-col>
-                        <el-col :span="6">处置班组：{{taskinfo.taskTime}}</el-col>
-                        <el-col :span="6">派发时间：{{taskinfo.taskFacilitieCode}}</el-col>
-                    </el-row>
-                </div>
-            </div>
-
-            <div class="card">
-                <div class="title">现场驳回</div>
-                <div class="body">
-
-                    <el-row>
-                        <el-col :span="12">原因备注：{{task_type.filter(i=>i.value===taskinfo.taskType)[0]?.label ?? '-'}}</el-col>
-
-                        <el-col :span="12">驳回时间：{{taskinfo.taskTime}}</el-col>
-                        <el-col :span="12">照片：</el-col>
-                        <el-col :span="12">说明报告：<a>sdd</a></el-col>
-
-                    </el-row>
-                    <el-row>
-                        <el-col :span="24">
-                            <ImagePreview v-model:src="taskinfo.taskPics" :height="'120px'" :width="'120px'"></ImagePreview>
-                        </el-col>
-
-                    </el-row>
-                </div>
-            </div>
-
-            <div class="card">
-                <div class="title">跟踪信息</div>
-                <div class="body">
-                    <el-row>
-                        <el-col :span="6">是否及时完成：{{task_type.filter(i=>i.value===taskinfo.taskType)[0]?.label ?? '-'}}</el-col>
-                        <el-col :span="6">回访情况：{{ taskinfo.taskDeptRange.split(",").map(i=>{ return alldept.find(p=>{return (p.deptId+"")===(i+"")})?.deptName ?? '-' } ).join(",") }}</el-col>
-                        <el-col :span="6">处置完成日期：{{taskinfo.taskTime}}</el-col>
-                        <el-col :span="6">记录人：{{taskinfo.taskFacilitieCode}}</el-col>
-                    </el-row>
-                </div>
-            </div>
-
-            <div class="card">
-                <div class="title">处置信息</div>
-                <div class="body">
-
-                   <div v-for="(item,index1) in processdata">
-                     <div class="titleheader" :style="`${index1==0?'margin-top:0px':''}`">{{item.title}}</div>
-                     <div>
-                        <el-row>
-                        <el-col :span="6" v-for="p in item.content">{{p}}</el-col>
-                    </el-row>
-                     </div>
-                   </div>
-
-                   <div>
-                       <div class="titleheader">现场图片</div>
-                        <el-row>
-                        <el-col :span="24" >
-                          <ImagePreview v-model:src="taskinfo.taskPics" :height="'120px'" :width="'120px'"></ImagePreview>
-                        </el-col>
-                        </el-row>
-
-
-                   </div>
-
-
-                </div>
+  <div style="padding: 10px 15px">
+    <div class="taskdetail">
+      <div class="title">
+        {{ taskinfo.taskCode }} 工单
+        <div class="btngroup">
+          <el-button
+            type="primary"
+            v-if="taskinfo.status == 1"
+            @click="showpf = true"
+            >派 发</el-button
+          >
+          <el-button type="primary" v-if="taskinfo.status == 2" @click="showbh=true"
+            >驳 回</el-button
+          >
+          <el-button type="primary" v-if="taskinfo.status == 2"
+            >处 置</el-button
+          >
+          <el-button type="primary" v-if="taskinfo.status == 3"
+            >审 核</el-button
+          >
+          <el-button type="primary" v-if="taskinfo.status == 5"
+            >跟 踪</el-button
+          >
+          <el-button
+            type="danger"
+            @click="
+              () => {
+                router.back();
+              }
+            "
+            >返回</el-button
+          >
+        </div>
+      </div>
+      <div class="card">
+        <div class="title">工单信息</div>
+        <div class="body">
+          <el-row>
+            <el-col :span="6"
+              >事件来源：{{
+                task_type.filter(
+                  (i) => i.value.toString() === taskinfo.taskType.toString()
+                )[0]?.label ?? "-"
+              }}</el-col
+            >
+            <el-col :span="6"
+              >班组区域：{{
+                (taskinfo.taskDeptRange ?? "")
+                  .split(",")
+                  .map((i) => {
+                    return (
+                      alldept.find((p) => {
+                        return p.deptId + "" === i + "";
+                      })?.deptName ?? "-"
+                    );
+                  })
+                  .join(",")
+              }}</el-col
+            >
+            <el-col :span="6">来件时间：{{ taskinfo.taskTime }}</el-col>
+            <el-col :span="6"
+              >设施编号：{{ taskinfo.taskFacilitieCode }}</el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="6"
+              >事件分类：{{
+                task_event_type.filter(
+                  (i) =>
+                    i.value.toString() === taskinfo.taskEventType.toString()
+                )[0]?.label ?? "-"
+              }}</el-col
+            >
+            <el-col :span="6">其他工单号：{{ taskinfo.taskOtherId }}</el-col>
+            <el-col :span="6"
+              >要求完成时间：{{ taskinfo.taskReqCompleteTime }}</el-col
+            >
+            <el-col :span="6"
+              >事件类型：{{
+                task_event_category.filter(
+                  (i) =>
+                    i.value.toString() === taskinfo.taskEventCategory.toString()
+                )[0]?.label ?? "-"
+              }}</el-col
+            >
+          </el-row>
+          <el-row>
+            <el-col :span="6">来件备注：{{ taskinfo.taskFromRemark }}</el-col>
+            <el-col :span="6"
+              >投诉人电话：{{ taskinfo.taskComplainConnect }}</el-col
+            >
+            <el-col :span="6">上报人：{{ taskinfo.taskReporter }}</el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">详细地址：{{ taskinfo.taskAddr }}</el-col>
+            <el-col :span="12">备注信息：{{ taskinfo.remark }}</el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">现场照片：</el-col>
+            <el-col :span="12">任务内容：{{ taskinfo.taskContent }}</el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="24">
+              <ImagePreview
+                v-model:src="taskinfo.taskPics"
+                :height="'120px'"
+                :width="'120px'"
+              ></ImagePreview>
+            </el-col>
+            <el-col
+              :span="24"
+              v-if="taskinfo.taskPics === null || taskinfo.taskPics === ''"
+            >
+              <div style="margin-left: 20px">暂无图片</div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div class="card" v-if="taskinfo.status > 1">
+        <div class="title">派发信息</div>
+        <div class="body">
+          <el-row>
+            <el-col :span="6"
+              >负责人：{{
+                allusers.filter(
+                  (i) =>
+                    i.userId.toString() ===
+                    JSON.parse(
+                      taskinfo.tblTaskLogList.filter(
+                        (ii) => ii.taskStatus === 2
+                      )[0].logDes
+                    ).fzr.toString()
+                )[0]?.nickName ?? "-"
+              }}</el-col
+            >
+            <el-col :span="6"
+              >联系方式：{{
+                allusers.filter(
+                  (i) =>
+                    i.userId.toString() ===
+                    JSON.parse(
+                      taskinfo.tblTaskLogList.filter(
+                        (ii) => ii.taskStatus === 2
+                      )[0].logDes
+                    ).fzr.toString()
+                )[0]?.phonenumber ?? "-"
+              }}</el-col
+            >
+            <el-col :span="6"
+              >处置班组：{{
+                alldept
+                  .filter(
+                    (i) =>
+                      (
+                        JSON.parse(
+                          taskinfo.tblTaskLogList.filter(
+                            (ii) => ii.taskStatus === 2
+                          )[0].logDes
+                        ).fzbz ?? []
+                      ).indexOf(i.deptId) != -1
+                  )
+                  .map((i) => i.deptName)
+                  .join(",")
+              }}</el-col
+            >
+            <el-col :span="6"
+              >派发时间：{{
+                taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 2)[0]
+                  .createTime
+              }}</el-col
+            >
+          </el-row>
+        </div>
+      </div>
+
+      <div class="card" v-if="taskinfo.status == 4">
+        <div class="title">现场驳回</div>
+        <div class="body">
+          <el-row>
+            <el-col :span="12"
+              >原因备注：{{
+                 JSON.parse(
+                          taskinfo.tblTaskLogList.filter(
+                            (ii) => ii.taskStatus === 4
+                          )[0].logDes ?? "{}"
+                        )
+                  .resonRemark
+              }}</el-col
+            >
+
+            <el-col :span="12">驳回时间：{{  taskinfo.tblTaskLogList.filter((ii) => ii.taskStatus === 4)[0]
+                  .createTime }}</el-col>
+            <el-col :span="12">照片：</el-col>
+            <el-col :span="12">
+              <div style="position:relative">
+                 说明报告：
+                 <div style="position:absolute;top:0;left:60px;width:100%">
+                   <div style="margin-bottom:10px;color:#4f9eee;display:inline-block;margin-left:10px" v-for="i in (JSON.parse(
+                          taskinfo.tblTaskLogList.filter(
+                            (ii) => ii.taskStatus === 4
+                          )[0].logDes ?? '{}'
+                        ).files?.split(',') ??[])"><a target="_blank" :href="`${STATICURL+i}`" >
+
+                        {{i.split('/')[i.split('/').length-1]}}
+                        </a>
+                        </div>
+                 </div>
+
+              </div>
+
+
+                       </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <ImagePreview
+                v-model:src="
+                JSON.parse(
+                          taskinfo.tblTaskLogList.filter(
+                            (ii) => ii.taskStatus === 4
+                          )[0].logDes ?? '{}'
+                        ).images"
+                :height="'120px'"
+                :width="'120px'"
+              ></ImagePreview>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div class="card" v-if="taskinfo.status > 5">
+        <div class="title">跟踪信息</div>
+        <div class="body">
+          <el-row>
+            <el-col :span="6"
+              >是否及时完成：{{
+                task_type.filter((i) => i.value === taskinfo.taskType)[0]
+                  ?.label ?? "-"
+              }}</el-col
+            >
+            <el-col :span="6"
+              >回访情况：{{
+                (taskinfo.taskDeptRange ?? "")
+                  .split(",")
+                  .map((i) => {
+                    return (
+                      alldept.find((p) => {
+                        return p.deptId + "" === i + "";
+                      })?.deptName ?? "-"
+                    );
+                  })
+                  .join(",")
+              }}</el-col
+            >
+            <el-col :span="6">处置完成日期：{{ taskinfo.taskTime }}</el-col>
+            <el-col :span="6">记录人：{{ taskinfo.taskFacilitieCode }}</el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div class="card" v-if="taskinfo.status > 4">
+        <div class="title">处置信息</div>
+        <div class="body">
+          <div v-for="(item, index1) in processdata">
+            <div
+              class="titleheader"
+              :style="`${index1 == 0 ? 'margin-top:0px' : ''}`"
+            >
+              {{ item.title }}
             </div>
-
-            <div class="card">
-                <div class="title">核查信息</div>
-                <div class="body">
-
-                    <el-row>
-                        <el-col :span="12">核查人员：{{task_type.filter(i=>i.value===taskinfo.taskType)[0]?.label ?? '-'}}</el-col>
-
-                        <el-col :span="12">核查时间：{{taskinfo.taskTime}}</el-col>
-                        <el-col :span="24">核查备注：{{taskinfo.taskFacilitieCode}}</el-col>
-                    </el-row>
-                </div>
+            <div>
+              <el-row>
+                <el-col :span="6" v-for="p in item.content">{{ p }}</el-col>
+              </el-row>
             </div>
-
-
-
-
-
+          </div>
+
+          <div>
+            <div class="titleheader">现场图片</div>
+            <el-row>
+              <el-col :span="24">
+                <ImagePreview
+                  v-model:src="taskinfo.taskPics"
+                  :height="'120px'"
+                  :width="'120px'"
+                ></ImagePreview>
+              </el-col>
+            </el-row>
+          </div>
         </div>
-
-
+      </div>
+
+      <div class="card" v-if="taskinfo.status > 5">
+        <div class="title">核查信息</div>
+        <div class="body">
+          <el-row>
+            <el-col :span="12"
+              >核查人员：{{
+                task_type.filter((i) => i.value === taskinfo.taskType)[0]
+                  ?.label ?? "-"
+              }}</el-col
+            >
+
+            <el-col :span="12">核查时间：{{ taskinfo.taskTime }}</el-col>
+            <el-col :span="24"
+              >核查备注：{{ taskinfo.taskFacilitieCode }}</el-col
+            >
+          </el-row>
+        </div>
+      </div>
     </div>
+
+    <el-dialog v-model="showpf" title="任务派发" draggable>
+      <div>
+        <el-form :model="pdobj" label-width="120px">
+          <el-form-item label="负责班组"
+            ><el-tree-select
+              style="width: 100%"
+              v-model="pdobj.fzbz"
+              multiple
+              :data="treedept"
+              check-strictly="true"
+          /></el-form-item>
+          <el-form-item label="负责人">
+            <el-select
+              v-model="pdobj.fzr"
+              placeholder="请选择"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in allusers.filter(
+                  (i) => (pdobj.fzbz ?? []).indexOf(i.deptId) !== -1
+                )"
+                :label="item.nickName"
+                :value="item.userId"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showpf = false">取消</el-button>
+          <el-button type="primary" @click="Taskdistributed">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="showbh" title="任务驳回" draggable>
+      <div>
+        <el-form :model="bhobj" label-width="120px">
+          <el-form-item label="驳回原因"
+            ><el-input
+              v-model="bhobj.resonRemark"
+              :rows="2"
+              type="textarea"
+              placeholder="请输入驳回原因"
+          /></el-form-item>
+          <el-form-item label="现场照片">
+             <ImageUpload v-model="bhobj.images"></ImageUpload>
+          </el-form-item>
+
+          <el-form-item label="说明报告">
+             <FileUpload v-model="bhobj.files" :fileSize="100"></FileUpload>
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showbh = false">取消</el-button>
+          <el-button type="primary" @click="TaskClose">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, ref } from 'vue'
-import { useDict } from '@/utils/dict';
+import { defineComponent, ref, onMounted, watch } from "vue";
+import { useDict } from "@/utils/dict";
 // 图片预览组件
-import ImagePreview from "@/components/ImagePreview"
-import { cloneDeep } from 'lodash';
+import ImagePreview from "@/components/ImagePreview";
+import { cloneDeep } from "lodash";
 import { listDept, getDept } from "@/api/system/dept";
-import router from '../../../router';
-const { task_status, task_type, task_event_type, task_event_category } = useDict("task_status", "task_type", "task_event_type", "task_event_category");
-
+import router from "../../../router";
+import { useRoute } from "vue-router";
+import {
+  listTask,
+  getTask,
+  delTask,
+  addTask,
+  updateTask,
+  distributedTask,
+  closeTask
+} from "@/api/system/task";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+} from "@/api/system/user";
+import { treeselect as deptTreeselect } from "@/api/system/dept";
+import { ElMessage } from "element-plus";
+import ImageUpload from "@/components/ImageUpload"
+import FileUpload from "@/components/FileUpload"
+
+const STATICURL= import.meta.env.VITE_APP_BASE_API;
+
+const { task_status, task_type, task_event_type, task_event_category } =
+  useDict("task_status", "task_type", "task_event_type", "task_event_category");
+
+const route = useRoute();
+const showpf = ref(false);
+const showbh = ref(false);
+const pdobj = ref({ fzbz: [], fzr: "" });
+const bhobj = ref({ resonRemark: [], files: "" ,images:[]});
+
+if (!route.params.id || route.params.id == "undefined") {
+  router.back();
+}
 
+const TaskClose = () => {
+  closeTask({
+    taskId: route.params.id,
+    logDes: JSON.stringify(bhobj.value),
+  }).then((res) => {
+    showbh.value = false;
+    ElMessage.success("成功！");
+    getTask(Number(route.params.id)).then((res) => {
+        taskinfo.value = res.data;
+  });
+  });
+};
+const Taskdistributed = () => {
+  distributedTask({
+    taskId: route.params.id,
+    logDes: JSON.stringify(pdobj.value),
+  }).then((res) => {
+    showpf.value = false;
+    ElMessage.success("派发成功！");
+    getTask(Number(route.params.id)).then((res) => {
+        taskinfo.value = res.data;
+  });
+  });
+};
+// console.error(route.params.id)
 
 const alldept = ref([]);
-listDept().then(response => {
-    alldept.value = cloneDeep(response.data);
+listDept().then((response) => {
+  alldept.value = cloneDeep(response.data);
 });
 
-const processdata = ref([{title:'相应信息',content:["响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss"]},{title:'相应信息',content:["响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss"]},{title:'相应信息',content:["响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss"]},{title:'相应信息',content:["响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss"]},{title:'相应信息',content:["响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss"]},{title:'相应信息',content:["响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss","响应时间：sss"]}])
+function setdatakey(dept) {
+  if (dept.children) {
+    dept.children = dept.children.map((i) => {
+      return setdatakey(i);
+    });
+  }
+  dept["value"] = dept.id;
+  return dept;
+}
 
+const treedept = ref([]);
+const allusers = ref([]);
+listUser({ pageSize: 1000 }).then((res) => {
+  allusers.value = res.rows;
+});
+deptTreeselect().then((res) => {
+  treedept.value = [setdatakey(res.data[0])];
+});
+
+const processdata = ref([
+  {
+    title: "相应信息",
+    content: [
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+    ],
+  },
+  {
+    title: "相应信息",
+    content: [
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+    ],
+  },
+  {
+    title: "相应信息",
+    content: [
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+    ],
+  },
+  {
+    title: "相应信息",
+    content: [
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+    ],
+  },
+  {
+    title: "相应信息",
+    content: [
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+    ],
+  },
+  {
+    title: "相应信息",
+    content: [
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+      "响应时间：sss",
+    ],
+  },
+]);
 
 const taskinfo = ref({
-    taskName: "测试任务",
-    taskContent: "测试任务测试任务测试任务测试任务测试任务测试任务测试任务测试任务",
-    taskAddr: "-",
-    taskLocation: "-",
-    taskCode: "-",
-    taskType: "1",
-    taskEventType: "1",
-    taskEventCategory: "1",
-    taskFromRemark: "-",
-    taskAddrRoad: "-",
-    taskOtherId: "-",
-    taskTime: "2022-11-11 16:11:11",
-    taskReqCompleteTime: "2022-11-11 16:11:11",
-    status: 1,
-    taskCreater: "-",
-    taskReporter: "-",
-    taskPics: "/profile/upload/2022/06/01/icon128_20220601100554A011.png,/profile/upload/2022/05/31/icon16_20220531155706A001.png",
-    remark: "sss",
-    taskVideos: "-",
-    taskComplainConnect: "-",
-    taskDeptRange: "100,103",
-    taskFacilitieCode: "sdsdfdf"
-})
+  taskName: "",
+  taskContent:
+    "",
+  taskAddr: "-",
+  taskLocation: "-",
+  taskCode: "-",
+  taskType: "1",
+  taskEventType: "1",
+  taskEventCategory: "1",
+  taskFromRemark: "-",
+  taskAddrRoad: "-",
+  taskOtherId: "-",
+  taskTime: "2022-11-11 16:11:11",
+  taskReqCompleteTime: "2022-11-11 16:11:11",
+  status: 1,
+  taskCreater: "-",
+  taskReporter: "-",
+  taskPics:
+    "",
+  remark: "sss",
+  taskVideos: "-",
+  taskComplainConnect: "-",
+  taskDeptRange: "",
+  taskFacilitieCode: "",
+  tblTaskLogList: [],
+});
+
+onMounted(() => {
+  getTask(Number(route.params.id)).then((res) => {
+    taskinfo.value = res.data;
+  });
+});
 </script>
 
 <style lang="scss">
 .taskdetail {
-    background: #fff;
-    padding: 30px 22px;
+  background: #fff;
+  padding: 30px 22px;
+  border-radius: 8px;
+  overflow-y: auto;
+  padding-top: 20px;
+  position: relative;
+  .el-select {
+    width: 100%;
+  }
+  .title {
+    color: #2b3551;
+    font-size: 16px;
+    font-weight: 400;
+    .btngroup {
+      position: absolute;
+      top: 13px;
+      right: 20px;
+      .el-button {
+        margin-left: 25px;
+      }
+    }
+  }
+  .card {
+    border: 1px solid #e5e9f2;
     border-radius: 8px;
-    overflow-y: auto;
-    padding-top: 20px;
-    position: relative;
+    margin-top: 16px;
+    overflow: hidden;
     .title {
-        color: #2B3551;
-        font-size: 16px;
-        font-weight: 400;
-        .btngroup {
-            position: absolute;
-            top: 13px;
-            right: 20px;
-            .el-button {
-                margin-left: 25px;
-            }
-        }
+      background: rgba(192, 204, 218, 0.2);
+      height: 54px;
+      line-height: 54px;
+      color: #324057;
+      font-size: 14px;
+      font-weight: Bold;
+      padding-left: 22px;
     }
-    .card {
-        border: 1px solid #E5E9F2;
-        border-radius: 8px;
-        margin-top: 16px;
-        overflow: hidden;
-        .title {
-            background: rgba(192, 204, 218, 0.2);
-            height: 54px;
-            line-height: 54px;
-            color: #324057;
-            font-size: 14px;
-            font-weight: Bold;
-            padding-left: 22px;
-        }
-        .body {
-            padding: 20px;
-            color: #475669;
-            font-size: 14px;
-            // padding-top: 10px;
-            .el-col {
-                margin-bottom: 20px;
-            }
-            .titleheader{
-              color:#2C7DE3;
-              font-weight: Bold;
-              margin-bottom: 24px;
-              margin-top: 20px;
-            }
-        }
+    .body {
+      padding: 20px;
+      color: #475669;
+      font-size: 14px;
+      // padding-top: 10px;
+      .el-col {
+        margin-bottom: 20px;
+      }
+      .titleheader {
+        color: #2c7de3;
+        font-weight: Bold;
+        margin-bottom: 24px;
+        margin-top: 20px;
+      }
     }
+  }
 }
 </style>

src/views/task/list/index.vue

@@ -47,53 +47,64 @@
             <el-button type="primary" @click="getList">查询</el-button>
           </el-form-item>
           <el-form-item>
-            <el-button type="success" @click="showadd = true">新增</el-button>
+            <el-button type="success" @click="addtask">新增</el-button>
           </el-form-item>
         </div>
       </el-form>
 
-<div>
-      <el-table
-        :data="tableData"
-        class="eltable"
-
-        style="width: 100%"
-        @row-click="tblrowclick"
-      >
-
-        <el-table-column prop="taskCode" label="工单号" width="180" />
-        <el-table-column prop="taskArea" label="行政区" >
-           <template #default="scope">
-             {{(sys_area??[]).filter(i=>i.value===scope.row.taskArea+"")[0]?.label ?? '-'}}
-           </template>
-        </el-table-column>
-        <el-table-column  label="事件来源" >
-           <template #default="scope">
-             {{task_type.filter(i=>i.value===scope.row.taskType+"")[0]?.label ?? '-'}}
-           </template>
-        </el-table-column>
-        <el-table-column  label="状态" >
-          <template #default="scope">
-             {{task_status.filter(i=>i.value===scope.row.status+"")[0]?.label ?? '-'}}
-           </template>
-        </el-table-column>
-        <el-table-column prop="taskAddrRoad" label="道路名" />
-        <el-table-column prop="taskContent" label="任务内容" />
-        <el-table-column prop="taskTime" label="来件时间" />
-        <!-- <el-table-column prop="address" label="操作" >
-                  <template #default="scope">
-                    <el-button text size="small" @click="handleClick"></el-button>
-                    <el-button text size="small">Edit</el-button>
+      <div>
+        <el-table
+          :data="tableData"
+          class="eltable"
+          style="width: 100%"
+          @row-click="tblrowclick"
+        >
+          <el-table-column prop="taskCode" label="工单号" width="180" />
+          <el-table-column prop="taskArea" label="行政区">
+            <template #default="scope">
+              {{
+                (sys_area ?? []).filter(
+                  (i) => i.value === scope.row.taskArea + ""
+                )[0]?.label ?? "-"
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column label="事件来源">
+            <template #default="scope">
+              {{
+                task_type.filter((i) => i.value === scope.row.taskType + "")[0]
+                  ?.label ?? "-"
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column label="状态">
+            <template #default="scope">
+              {{
+                task_status.filter((i) => i.value === scope.row.status + "")[0]
+                  ?.label ?? "-"
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="taskAddrRoad" label="道路名" />
+          <el-table-column prop="taskContent" label="任务内容" />
+          <el-table-column prop="taskTime" label="来件时间" />
+          <!-- <el-table-column prop="address" label="操作" >
+<template #default="scope">
+    <el-button text size="small" @click="handleClick">
+    </el-button>
+    <el-button text size="small">Edit</el-button>
 </template>
         </el-table-column> -->
-      </el-table>
-      <div style="position:relative;padding-right:20px;margin-top:-20px">
-
-        <Pagination :total="pagedata.total??0"  v-show="pagedata.total > 0"
-         v-model:page="queryparameters.pageNum"
-         v-model:limit="queryparameters.pageSize"
-         @pagination="getList"></Pagination>
-        <!-- <el-pagination
+        </el-table>
+        <div style="position: relative; padding-right: 20px; margin-top: -20px">
+          <Pagination
+            :total="pagedata.total ?? 0"
+            v-show="pagedata.total > 0"
+            v-model:page="queryparameters.pageNum"
+            v-model:limit="queryparameters.pageSize"
+            @pagination="getList"
+          ></Pagination>
+          <!-- <el-pagination
           style="float: right"
           small
           background
@@ -104,18 +115,18 @@
           :total="pagedata.total??0"
           class="mt-4"
         /> -->
+        </div>
       </div>
     </div>
-    </div>
 
-    <el-dialog v-model="showadd" title="新增任务" width="70%" draggable>
+    <el-dialog v-model="showadd" v-loading="loading" title="新增任务" width="70%" draggable>
       <div>
-        <TaskAdd></TaskAdd>
+        <TaskAdd v-model:taskinfo="taskinfo" ref="taskaddref"></TaskAdd>
       </div>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="showadd = false">取消</el-button>
-          <el-button type="primary" @click="showadd = false">保存</el-button>
+          <el-button type="primary" @click="ontaskadd">保存</el-button>
         </span>
       </template>
     </el-dialog>
@@ -128,41 +139,106 @@ import { useDict } from "@/utils/dict";
 import TaskAdd from "@/components/Task/Add";
 import router from "../../../router";
 // 分页组件
+import Pagination from "@/components/Pagination";
+import {
+  listTask,
+  getTask,
+  delTask,
+  addTask,
+  updateTask,
+} from "@/api/system/task";
+import { cloneDeep } from 'lodash';
+import { isArray } from "@vue/shared";
 
-import Pagination from '@/components/Pagination'
-
-import { listTask, getTask, delTask, addTask, updateTask } from "@/api/system/task";
-
-const showadd = ref(false);
+const {
+  task_status,
+  task_type,
+  task_event_type,
+  task_event_category,
+  sys_area,
+} = useDict(
+  "task_status",
+  "task_type",
+  "task_event_type",
+  "task_event_category",
+  "sys_area"
+);
+const queryparameters = ref({
+  status: "",
+  taskArea: "",
+  pageNum: 1,
+  pageSize: 10,
+});
+const loading = ref(false);
 const { proxy } = getCurrentInstance();
-
-// const { task_status } = useDict("task_status");
-const { task_status, task_type, task_event_type, task_event_category,sys_area } = useDict("task_status", "task_type", "task_event_type", "task_event_category","sys_area");
-
-
-// const { area } = useDict("area");
-
+const showadd = ref(false);
 const qdate = ref([]);
+const tableData = ref([]);
+const pagedata = ref({});
+const taskinfo = ref();
+const taskaddref = ref();
 
-const queryparameters = ref({  status: "", taskArea: "",pageNum:1,pageSize:10 });
-const tableData = ref([
-
-]);
-const pagedata = ref({})
+const addtask = () => {
+  showadd.value = true;
+  taskinfo.value = {
+    taskName: null,
+    taskContent: null,
+    taskAddr: null,
+    taskLocation: null,
+    taskCode: null,
+    taskType: null,
+    taskEventType: null,
+    taskEventCategory: null,
+    taskFromRemark: null,
+    taskAddrRoad: null,
+    taskOtherId: null,
+    taskTime: null,
+    taskArea:"1",
+    taskReqCompleteTime: null,
+    status: 1,
+    remark: "",
+    taskCreater: null,
+    taskReporter: null,
+    taskPics: null,
+    taskVideos: null,
+    taskComplainConnect: null,
+    taskDeptRange: "",
+    taskFacilitieCode: "",
+    remark: "",
+  };
+  // console.log(taskaddref.value)
+  taskaddref.value?.doinit();
+};
 
 const tblrowclick = (row) => {
-  console.log(row);
-  router.push("/task/detail");
+  // console.log(row)
+  router.push(`/task/detail/${row.taskId}`);
 };
- const getList = () =>{
-      listTask(proxy.addDateRange(queryparameters.value,qdate.value)).then(response => {
-        tableData.value = response.rows;
-        pagedata.value = response;
-      });
+const ontaskadd = async ()=>{
+  showadd.value = false;
+  var taskobj = cloneDeep(taskinfo.value);
+  taskobj.status = 1;
+  taskobj.taskDeptRange = (taskobj.taskDeptRange instanceof Array) ? taskobj.taskDeptRange.join(","):'';
+  // console.log(taskobj);
+  loading.value = true;
+
+  await addTask(taskobj);
+  loading.value = false;
+  getList();
+}
+const getList = () => {
+  listTask(proxy.addDateRange(queryparameters.value, qdate.value)).then(
+    (response) => {
+      tableData.value = response.rows;
+      pagedata.value = response;
     }
-    getList();
+  );
+};
+getList();
 
-onMounted(() => {});
+onMounted(() => {
+  // console.log(taskaddref.value)
+});
 </script>
 
 <style lang="scss" scoped>
@@ -170,14 +246,12 @@ onMounted(() => {});
   background: #fff;
   width: 100%;
   border-radius: 5px;
- min-height: 80vh;
+  min-height: 80vh;
   padding: 15px 10px;
   .eltable {
     border: 1px solid #e5e9f2;
     border-radius: 5px;
-
   }
-
 }
 </style>