devicesmgt/sgzb-ui/src/views/index.vue

<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="keyWord">
        <el-input
          v-model="queryParams.keyWord"
          placeholder="请输入关键字"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="待办单号" prop="taskCode">
        <el-input
          v-model="queryParams.taskCode"
          placeholder="请输入待办单号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="待办事件" prop="taskTypeId">
        <el-select v-model="queryParams.taskTypeId" placeholder="待办事件" clearable filterable style="width: 240px">
          <el-option
            v-for="types in taskTypeList"
            :key="types.taskTypeId"
            :label="types.taskType"
            :value="types.taskTypeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </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:dict: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:dict: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:dict: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:dict:export']"-->
    <!--        >导出</el-button>-->
    <!--      </el-col>-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--          type="danger"-->
    <!--          plain-->
    <!--          icon="el-icon-refresh"-->
    <!--          size="mini"-->
    <!--          @click="handleRefreshCache"-->
    <!--          v-hasPermi="['system:dict:remove']"-->
    <!--        >刷新缓存</el-button>-->
    <!--      </el-col>-->
    <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
    <!--    </el-row>-->

    <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="序号" align="center" width="80" type="index">
        <template scope="scope">
          <span>{{ (queryParams.pageNum - 1) * 10 + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务单号" align="center" prop="taskCode" show-overflow-tooltip />
      <el-table-column label="待办任务" align="center" prop="taskType" show-overflow-tooltip />
      <el-table-column label="待办事件" align="center" prop="taskEvent"></el-table-column>
      <el-table-column label="任务创建人" align="center" prop="createName" show-overflow-tooltip />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handlePreview(row.taskTypeId, row.taskCode)">
            查 看
          </el-button>

          <!-- 代办事件为领料任务时显示催办按钮 -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit-outline"
            style="color: #e6a23c"
            v-if="row.taskTypeId == 29"
            @click="handleUrging(row.taskTypeId, row.taskCode, row.taskEvent, row.taskId)"
          >
            催 办
          </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="催办"
      :visible.sync="urgingDialogVisible"
      width="60%"
      append-to-body
      :before-close="handleCloseUrgingDialog"
    >
      <el-form label-width="120px" label-position="right">
        <el-form-item label="待办人：">
          <el-row>
            <el-tag
              class="addressee"
              :closable="toPersonInfo.length > 1"
              type="info"
              v-for="(item, v) in toPersonInfo"
              :key="v.noticeUser"
              @close="handleDeleteToPerson(v)"
            >
              {{ item.v_name }}
            </el-tag>
          </el-row>
        </el-form-item>
        <el-form-item label="通知内容：">
          <div class="message-info" v-html="sendMessageParams.message"></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-position" size="medium" type="primary" @click="submitForm">发 送</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {
        getToDoList,
        getTaskTypeList,
        getToPersonInfoAp,
        sendUrgingMessageApi,
    } from '@/api/index'
    export default {
        name: 'myIndex',
        data() {
            return {
                // 遮罩层
                loading: false,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 字典表格数据
                typeList: [],
                // 日期范围
                dateRange: [],
                taskTypeList: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    keyWord: '',
                    taskCode: '',
                    taskTypeId: '',
                },

                /* 列表查看跳转的路由地址 */
                previewRouterList: [
                    /* 新购任务 */
                    {
                        taskTypeId: 23,
                        routerPath: 'store/newBuy/newDevicesList',
                    },
                    /* 领料任务 */
                    {
                        taskTypeId: 29,
                        routerPath: 'claimAndRefund/receive/receiveManage',
                    },
                    /* 退料任务 */
                    {
                        taskTypeId: 36,
                        routerPath: 'claimAndRefund/return/returnApply',
                    },
                    /* 维修任务 */
                    {
                        taskTypeId: 41,
                        routerPath: 'repairTest/repair/repair',
                    },
                ],

                /* 催办弹框 */
                urgingDialogVisible: false,
                /* 待办人信息 */
                toPersonInfo: [],
                /* 发送参数 */
                sendMessageParams: {
                    taskId: '',
                    message: '',
                    // 接收人
                    bmNoticeInfoList: [],
                },
            }
        },
        created() {
            this.getList()
            this.getTaskTypeList()
        },
        methods: {
            getTaskTypeList() {
                getTaskTypeList().then((response) => {
                    this.taskTypeList = response.data
                })
            },
            /** 查询字典类型列表 */
            getList() {
                this.loading = true
                console.log(this.dateRange)
                if (this.dateRange && this.dateRange.length > 0) {
                    this.queryParams.startTime = this.dateRange[0]
                    this.queryParams.endTime = this.dateRange[1]
                } else {
                    this.queryParams.startTime = ''
                    this.queryParams.endTime = ''
                }
                getToDoList(this.queryParams).then((response) => {
                    this.typeList = response.rows
                    this.total = response.total
                    this.loading = false
                })
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1
                this.getList()
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = []
                this.resetForm('queryForm')
                this.handleQuery()
            },
<<<<<<< HEAD

            /**
             * 列表查看操作===========================================================
             */
            handlePreview(id, key) {
                const [routerInfo] = this.previewRouterList.filter(
                    (e) => e.taskTypeId == id,
=======
            /** 新增按钮操作 */
            handleAdd() {
                this.reset()
                this.open = true
                this.title = '添加字典类型'
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map((item) => item.dictId)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                // this.reset();
                // const dictId = row.dictId || this.ids
                // getType(dictId).then(response => {
                //   this.form = response.data;
                //   this.open = true;
                //   this.title = "修改字典类型";
                // });
            },
            /** 提交按钮 */
            submitForm: function () {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (this.form.dictId != undefined) {
                            updateType(this.form).then((response) => {
                                this.$modal.msgSuccess('修改成功')
                                this.open = false
                                this.getList()
                            })
                        } else {
                            addType(this.form).then((response) => {
                                this.$modal.msgSuccess('新增成功')
                                this.open = false
                                this.getList()
                            })
                        }
                    }
                })
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const dictIds = row.dictId || this.ids
                this.$modal
                    .confirm(
                        '是否确认删除所选择的数据项？',
                    )
                    .then(function () {
                        return delType(dictIds)
                    })
                    .then(() => {
                        this.getList()
                        this.$modal.msgSuccess('删除成功')
                    })
                    .catch(() => {})
            },
            /** 导出按钮操作 */
            handleExport() {
                this.download(
                    'system/dict/type/export',
                    {
                        ...this.queryParams,
                    },
                    `type_${new Date().getTime()}.xlsx`,
>>>>>>> dev-cq-bug
                )
                this.$router.push({
                    path: routerInfo.routerPath,
                    query: {
                        keyWord: key,
                    },
                })
            },

            /* 催办按钮 */
            async handleUrging(id, taskCode, taskStatus, taskId) {
                /* 先获取催办人信息 */
                const { data: res } = await getToPersonInfoAp({
                    taskStatus,
                })
                res.map((e) => {
                    this.toPersonInfo.push({
                        noticeUser: e.userId,
                        phone: e.phonenumber,
                        modelName: '领料催办',
                        companyId: e.companyId,
                        v_name: e.nickName,
                    })
                })

                this.sendMessageParams.message = `宁夏送变电工程有限公司提示：您有一条任务单号为 <span style="color:#529b2e">${taskCode}</span> 的待办任务未处理，请及时处理。`
                this.sendMessageParams.taskId = taskId

                this.urgingDialogVisible = true
            },

            /* 取消其中某一个待办人 */
            handleDeleteToPerson(v) {
                this.toPersonInfo.splice(v, 1)
            },

            /* 催办发送 */
            async submitForm() {
                this.sendMessageParams.bmNoticeInfoList = this.toPersonInfo
                const res = await sendUrgingMessageApi(this.sendMessageParams)
                if (res.code == 200) {
                    this.$message.success('发送成功！')
                    this.toPersonInfo = []
                    this.urgingDialogVisible = false
                } else {
                    this.$message.error(res.msg)
                }
            },
            /* 弹框右上角关闭按钮 */
            handleCloseUrgingDialog() {
                this.toPersonInfo = []
                this.urgingDialogVisible = false
            },
        },
    }
</script>

<style scoped>
.message-info {
  height: 100px;
  padding: 0 10px;
  border: 1px solid #ccc;
  letter-spacing: 1px;
  border-radius: 3px;
  font-size: 16px;
  font-weight: bold;
}

.addressee {
  margin-left: 3px;
}
</style>