wenhongquan 3 سال پیش
والد
کامیت
687938b103
2فایلهای تغییر یافته به همراه510 افزوده شده و 512 حذف شده
  1. 426 425
      src/views/system/task/index.vue
  2. 84 87
      src/views/task/list/index.vue

+ 426 - 425
src/views/system/task/index.vue

@@ -1,425 +1,426 @@
-<template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="任务名称" prop="taskName">
-        <el-input
-          v-model="queryParams.taskName"
-          placeholder="请输入任务名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="任务编号" prop="taskCode">
-        <el-input
-          v-model="queryParams.taskCode"
-          placeholder="请输入任务编号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="任务事件类型 参见字典task_event_category" prop="taskEventCategory">
-        <el-input
-          v-model="queryParams.taskEventCategory"
-          placeholder="请输入任务事件类型 参见字典task_event_category"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="任务时间" prop="taskTime">
-        <el-date-picker clearable
-          v-model="queryParams.taskTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择任务时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="任务要求完成时间" prop="taskReqCompleteTime">
-        <el-date-picker clearable
-          v-model="queryParams.taskReqCompleteTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择任务要求完成时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="创建人" prop="taskCreater">
-        <el-input
-          v-model="queryParams.taskCreater"
-          placeholder="请输入创建人"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="上报人" prop="taskReporter">
-        <el-input
-          v-model="queryParams.taskReporter"
-          placeholder="请输入上报人"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="任务投诉人电话" prop="taskComplainConnect">
-        <el-input
-          v-model="queryParams.taskComplainConnect"
-          placeholder="请输入任务投诉人电话"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:task:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:task:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:task:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:task:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="任务编号" align="center" prop="taskId" />
-      <el-table-column label="任务名称" align="center" prop="taskName" />
-      <el-table-column label="任务内容" align="center" prop="taskContent" />
-      <el-table-column label="任务地址" align="center" prop="taskAddr" />
-      <el-table-column label="任务经纬度" align="center" prop="taskLocation" />
-      <el-table-column label="任务编号" align="center" prop="taskCode" />
-      <el-table-column label="任务类型 参见字典task_type" align="center" prop="taskType" />
-      <el-table-column label="任务事件类型 参见字典task_event_type" align="center" prop="taskEventType" />
-      <el-table-column label="任务事件类型 参见字典task_event_category" align="center" prop="taskEventCategory" />
-      <el-table-column label="任务接收时备注" align="center" prop="taskFromRemark" />
-      <el-table-column label="任务发生道路" align="center" prop="taskAddrRoad" />
-      <el-table-column label="其他工单号" align="center" prop="taskOtherId" />
-      <el-table-column label="任务时间" align="center" prop="taskTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.taskTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="任务要求完成时间" align="center" prop="taskReqCompleteTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.taskReqCompleteTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="任务状态" align="center" prop="status" />
-      <el-table-column label="创建人" align="center" prop="taskCreater" />
-      <el-table-column label="上报人" align="center" prop="taskReporter" />
-      <el-table-column label="图片" align="center" prop="taskPics" />
-      <el-table-column label="视频" align="center" prop="taskVideos" />
-      <el-table-column label="任务投诉人电话" align="center" prop="taskComplainConnect" />
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:task:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:task:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改工单任务对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="任务名称" prop="taskName">
-          <el-input v-model="form.taskName" placeholder="请输入任务名称" />
-        </el-form-item>
-        <el-form-item label="任务内容">
-          <editor v-model="form.taskContent" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="任务地址" prop="taskAddr">
-          <el-input v-model="form.taskAddr" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="任务经纬度" prop="taskLocation">
-          <el-input v-model="form.taskLocation" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="任务编号" prop="taskCode">
-          <el-input v-model="form.taskCode" placeholder="请输入任务编号" />
-        </el-form-item>
-        <el-form-item label="任务事件类型 参见字典task_event_category" prop="taskEventCategory">
-          <el-input v-model="form.taskEventCategory" placeholder="请输入任务事件类型 参见字典task_event_category" />
-        </el-form-item>
-        <el-form-item label="任务接收时备注" prop="taskFromRemark">
-          <el-input v-model="form.taskFromRemark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="任务发生道路" prop="taskAddrRoad">
-          <el-input v-model="form.taskAddrRoad" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="其他工单号" prop="taskOtherId">
-          <el-input v-model="form.taskOtherId" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="任务时间" prop="taskTime">
-          <el-date-picker clearable
-            v-model="form.taskTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择任务时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="任务要求完成时间" prop="taskReqCompleteTime">
-          <el-date-picker clearable
-            v-model="form.taskReqCompleteTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择任务要求完成时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="创建人" prop="taskCreater">
-          <el-input v-model="form.taskCreater" placeholder="请输入创建人" />
-        </el-form-item>
-        <el-form-item label="上报人" prop="taskReporter">
-          <el-input v-model="form.taskReporter" placeholder="请输入上报人" />
-        </el-form-item>
-        <el-form-item label="图片" prop="taskPics">
-          <el-input v-model="form.taskPics" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="视频" prop="taskVideos">
-          <el-input v-model="form.taskVideos" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="任务投诉人电话" prop="taskComplainConnect">
-          <el-input v-model="form.taskComplainConnect" placeholder="请输入任务投诉人电话" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { listTask, getTask, delTask, addTask, updateTask } from "@/api/system/task";
-
-export default {
-  name: "Task",
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 工单任务表格数据
-      taskList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        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: null,
-        taskCreater: null,
-        taskReporter: null,
-        taskPics: null,
-        taskVideos: null,
-        taskComplainConnect: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-      }
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询工单任务列表 */
-    getList() {
-      this.loading = true;
-      listTask(this.queryParams).then(response => {
-        this.taskList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        taskId: null,
-        taskName: null,
-        taskContent: null,
-        taskAddr: null,
-        taskLocation: null,
-        taskCode: null,
-        taskType: null,
-        taskEventType: null,
-        taskEventCategory: null,
-        taskFromRemark: null,
-        taskAddrRoad: null,
-        taskOtherId: null,
-        taskTime: null,
-        createTime: null,
-        taskReqCompleteTime: null,
-        updateTime: null,
-        status: 0,
-        taskCreater: null,
-        taskReporter: null,
-        taskPics: null,
-        taskVideos: null,
-        taskComplainConnect: null,
-        remark: null
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.taskId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加工单任务";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const taskId = row.taskId || this.ids
-      getTask(taskId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改工单任务";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.taskId != null) {
-            updateTask(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addTask(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const taskIds = row.taskId || this.ids;
-      this.$modal.confirm('是否确认删除工单任务编号为"' + taskIds + '"的数据项?').then(function() {
-        return delTask(taskIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/task/export', {
-        ...this.queryParams
-      }, `task_${new Date().getTime()}.xlsx`)
-    }
-  }
-};
-</script>
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="任务名称" prop="taskName">
+        <el-input
+          v-model="queryParams.taskName"
+          placeholder="请输入任务名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="任务编号" prop="taskCode">
+        <el-input
+          v-model="queryParams.taskCode"
+          placeholder="请输入任务编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="任务事件类型 参见字典task_event_category" prop="taskEventCategory">
+        <el-input
+          v-model="queryParams.taskEventCategory"
+          placeholder="请输入任务事件类型 参见字典task_event_category"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="任务时间" prop="taskTime">
+        <el-date-picker clearable
+          v-model="queryParams.taskTime"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="请选择任务时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="任务要求完成时间" prop="taskReqCompleteTime">
+        <el-date-picker clearable
+          v-model="queryParams.taskReqCompleteTime"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="请选择任务要求完成时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="创建人" prop="taskCreater">
+        <el-input
+          v-model="queryParams.taskCreater"
+          placeholder="请输入创建人"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="上报人" prop="taskReporter">
+        <el-input
+          v-model="queryParams.taskReporter"
+          placeholder="请输入上报人"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="任务投诉人电话" prop="taskComplainConnect">
+        <el-input
+          v-model="queryParams.taskComplainConnect"
+          placeholder="请输入任务投诉人电话"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:task:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:task:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:task:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:task:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="任务编号" align="center" prop="taskId" />
+      <el-table-column label="任务名称" align="center" prop="taskName" />
+      <el-table-column label="任务内容" align="center" prop="taskContent" />
+      <el-table-column label="任务地址" align="center" prop="taskAddr" />
+      <el-table-column label="任务经纬度" align="center" prop="taskLocation" />
+      <el-table-column label="任务编号" align="center" prop="taskCode" />
+      <el-table-column label="任务类型 参见字典task_type" align="center" prop="taskType" />
+      <el-table-column label="任务事件类型 参见字典task_event_type" align="center" prop="taskEventType" />
+      <el-table-column label="任务事件类型 参见字典task_event_category" align="center" prop="taskEventCategory" />
+      <el-table-column label="任务接收时备注" align="center" prop="taskFromRemark" />
+      <el-table-column label="任务发生道路" align="center" prop="taskAddrRoad" />
+      <el-table-column label="其他工单号" align="center" prop="taskOtherId" />
+      <el-table-column label="任务时间" align="center" prop="taskTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.taskTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="任务要求完成时间" align="center" prop="taskReqCompleteTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.taskReqCompleteTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="任务状态" align="center" prop="status" />
+      <el-table-column label="创建人" align="center" prop="taskCreater" />
+      <el-table-column label="上报人" align="center" prop="taskReporter" />
+      <el-table-column label="图片" align="center" prop="taskPics" />
+      <el-table-column label="视频" align="center" prop="taskVideos" />
+      <el-table-column label="任务投诉人电话" align="center" prop="taskComplainConnect" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:task:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:task:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改工单任务对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="任务名称" prop="taskName">
+          <el-input v-model="form.taskName" placeholder="请输入任务名称" />
+        </el-form-item>
+        <el-form-item label="任务内容">
+          <editor v-model="form.taskContent" :min-height="192"/>
+        </el-form-item>
+        <el-form-item label="任务地址" prop="taskAddr">
+          <el-input v-model="form.taskAddr" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="任务经纬度" prop="taskLocation">
+          <el-input v-model="form.taskLocation" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="任务编号" prop="taskCode">
+          <el-input v-model="form.taskCode" placeholder="请输入任务编号" />
+        </el-form-item>
+        <el-form-item label="任务事件类型 参见字典task_event_category" prop="taskEventCategory">
+          <el-input v-model="form.taskEventCategory" placeholder="请输入任务事件类型 参见字典task_event_category" />
+        </el-form-item>
+        <el-form-item label="任务接收时备注" prop="taskFromRemark">
+          <el-input v-model="form.taskFromRemark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="任务发生道路" prop="taskAddrRoad">
+          <el-input v-model="form.taskAddrRoad" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="其他工单号" prop="taskOtherId">
+          <el-input v-model="form.taskOtherId" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="任务时间" prop="taskTime">
+          <el-date-picker clearable
+            v-model="form.taskTime"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择任务时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="任务要求完成时间" prop="taskReqCompleteTime">
+          <el-date-picker clearable
+            v-model="form.taskReqCompleteTime"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择任务要求完成时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="创建人" prop="taskCreater">
+          <el-input v-model="form.taskCreater" placeholder="请输入创建人" />
+        </el-form-item>
+        <el-form-item label="上报人" prop="taskReporter">
+          <el-input v-model="form.taskReporter" placeholder="请输入上报人" />
+        </el-form-item>
+        <el-form-item label="图片" prop="taskPics">
+          <el-input v-model="form.taskPics" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="视频" prop="taskVideos">
+          <el-input v-model="form.taskVideos" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="任务投诉人电话" prop="taskComplainConnect">
+          <el-input v-model="form.taskComplainConnect" placeholder="请输入任务投诉人电话" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listTask, getTask, delTask, addTask, updateTask } from "@/api/system/task";
+
+export default {
+  name: "Task",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 工单任务表格数据
+      taskList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        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: null,
+        taskCreater: null,
+        taskReporter: null,
+        taskPics: null,
+        taskVideos: null,
+        taskComplainConnect: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询工单任务列表 */
+    getList() {
+      this.loading = true;
+      listTask(this.queryParams).then(response => {
+        this.taskList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        taskArea:null,
+        taskId: null,
+        taskName: null,
+        taskContent: null,
+        taskAddr: null,
+        taskLocation: null,
+        taskCode: null,
+        taskType: null,
+        taskEventType: null,
+        taskEventCategory: null,
+        taskFromRemark: null,
+        taskAddrRoad: null,
+        taskOtherId: null,
+        taskTime: null,
+        createTime: null,
+        taskReqCompleteTime: null,
+        updateTime: null,
+        status: 0,
+        taskCreater: null,
+        taskReporter: null,
+        taskPics: null,
+        taskVideos: null,
+        taskComplainConnect: null,
+        remark: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.taskId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加工单任务";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const taskId = row.taskId || this.ids
+      getTask(taskId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改工单任务";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.taskId != null) {
+            updateTask(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addTask(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const taskIds = row.taskId || this.ids;
+      this.$modal.confirm('是否确认删除工单任务编号为"' + taskIds + '"的数据项?').then(function() {
+        return delTask(taskIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/task/export', {
+        ...this.queryParams
+      }, `task_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

+ 84 - 87
src/views/task/list/index.vue

@@ -21,7 +21,11 @@
             class="m-1"
             placeholder="请选择"
           >
-          <el-option v-for="item in task_status" :label="item.label" :value="item.value"></el-option>
+            <el-option
+              v-for="item in task_status"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="区属">
@@ -30,33 +34,56 @@
             class="m-2"
             placeholder="请选择"
           >
-          <el-option v-for="item in area" :label="item.label" :value="item.value"></el-option>
+            <el-option
+              v-for="item in sys_area"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item>
-          <el-button type="primary">查询</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="success" @click="showadd= true">新增</el-button>
-        </el-form-item>
+        <div style="float: right">
+          <el-form-item>
+            <el-button type="primary">查询</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="success" @click="showadd = true">新增</el-button>
+          </el-form-item>
+        </div>
       </el-form>
 
       <el-table
         :data="tableData"
         class="eltable"
-        height="250"
+        height="300"
         style="width: 100%"
         @row-click="tblrowclick"
       >
-        <el-table-column prop="date" label="序号" width="50" />
-        <el-table-column prop="name" label="工单号" width="180" />
-        <el-table-column prop="address" label="行政区" />
-        <el-table-column prop="address" label="事件来源" />
-        <el-table-column prop="address" label="状态" />
-        <el-table-column prop="address" label="道路名" />
-        <el-table-column prop="address" label="任务内容" />
-        <el-table-column prop="address" label="来件时间" />
-        <el-table-column prop="address" label="操作" />
+
+        <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="text-align: right; margin-top: 10px; width: 100%">
         <el-pagination
@@ -71,87 +98,51 @@
     </div>
 
     <el-dialog v-model="showadd" title="新增任务" width="70%" draggable>
-     <div>
-
-     <TaskAdd></TaskAdd>
-
-     </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="showadd = false">取消</el-button>
-        <el-button type="primary" @click="showadd = false"
-          >保存</el-button
-        >
-      </span>
-    </template>
-  </el-dialog>
+      <div>
+        <TaskAdd></TaskAdd>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showadd = false">取消</el-button>
+          <el-button type="primary" @click="showadd = false">保存</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
+
 <script setup>
-import { defineComponent, ref, reactive,onMounted } from "vue";
-import { useDict } from '@/utils/dict';
-import  TaskAdd  from '@/components/Task/Add'
+import { defineComponent, ref, reactive, onMounted } from "vue";
+import { useDict } from "@/utils/dict";
+import TaskAdd from "@/components/Task/Add";
 import router from "../../../router";
-
+import { listTask, getTask, delTask, addTask, updateTask } from "@/api/system/task";
 
 const showadd = ref(false);
 
+// 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 {task_status} = useDict("task_status");
-
-const {area} = useDict("area");
 
+// const { area } = useDict("area");
 
 const queryparameters = ref({ times: "", status: "", area: "" });
-const tableData = [
-  {
-    date: "1",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "3",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "4",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "5",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "6",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "7",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-];
-
-const tblrowclick=(row)=>{
-  console.log(row);
-   router.push("/task/detail")
-
-}
-
-onMounted(()=>{
+const tableData = ref([
 
+]);
 
-})
-
+const tblrowclick = (row) => {
+  console.log(row);
+  router.push("/task/detail");
+};
+ const getList = () =>{
+      listTask({}).then(response => {
+        tableData.value = response.rows;
+      });
+    }
+    getList();
+
+onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
@@ -164,7 +155,13 @@ onMounted(()=>{
   .eltable {
     border: 1px solid #e5e9f2;
     border-radius: 5px;
-    min-height: 80vh;
+    min-height: 78vh;
   }
 }
 </style>
+
+<style>
+.el-table__row:hover {
+  cursor: pointer;
+}
+</style>