UI3/src/views/mobile/_processing.vue

<script setup lang="ts">
import { ref, computed } from "vue"
import moment from "moment"
import router from "@/router"
import Rs from "@/core/services/RequestService"
import { ElInput, ElSelect } from "element-plus"
import ProcessDetail from "./__processDetail.vue"
const cols = ref([
  {
    name: "公司名称",
    field: "company_name",
  },
  {
    name: "区域",
    field: "org_name",
  },

  {
    name: "报警类型",
    field: "warn_type_name",
  },
  {
    name: "状态",
    field: "work_order_stats_name",
  },

  {
    name: "操作",
    width: 150,
    field: "action",
  },
])

const size = ref<any>("default")
const dySearchSelectStyle = { width: "180px" }
const dateRange = ref<[Date, Date]>([moment(new Date()).add(-7, "d").toDate(), new Date()])
const companyName = ref("")
const warnType = ref("")
const workOrderState = ref("")
//const orgId = ref("0")
//const monitoringType = ref("")
//const abnormalState = ref("")
const queryParams = ref<any>({
  query_start_time: moment(dateRange.value[0]).format("YYYYMMDD"),
  query_end_time: moment(dateRange.value[1]).format("YYYYMMDD"),
})
const table = ref()

const jump = function (v: any) {
  console.log("jump", v)
  router.push({
    path: "/goLineData/oilFumeConcentration",
    query: {
      back: 1,
      comName: v.company_name,
      company_id: v.company_id,
    },
  })
}

function query() {
  const params = {
    //monitoring_type: monitoringType.value,
    //org_id: orgId.value,
    //abnormal_state: abnormalState.value,
    company_name: companyName.value,
    warn_type: warnType.value,
    work_order_state: workOrderState.value,
    query_start_time: moment(dateRange.value[0]).format("YYYYMMDD"),
    query_end_time: moment(dateRange.value[1]).format("YYYYMMDD"),
  }
  const keys = Object.keys(params)
  keys.forEach((key) => {
    if (params[key] == "" && params[key] !== 0) {
      delete params[key]
    }
  })
  queryParams.value = params
}
function reset() {
  //orgId.value = "0"
  //monitoringType.value = ""
  //abnormalState.value = ""
  companyName.value = ""
  warnType.value = ""
  workOrderState.value = ""
  dateRange.value = [moment(new Date()).add(-7, "d").toDate(), new Date()]
  query()
}
const modal = ref()
const warnDetails = ref<any>({})
const userList = ref<Array<any>>([])
const operationType = ref<"D" | "A" | "T">("D")

const url = computed(() => {
  return operationType.value == "A"
    ? "sys/workOrderOrg/transferByOrg"
    : operationType.value == "T"
    ? "sys/workOrderOrg/auditByOrg"
    : ""
})
const title = computed(() => {
  return operationType.value == "D"
    ? "详情"
    : operationType.value == "A"
    ? "审核"
    : operationType.value == "T"
    ? "转交"
    : ""
})
const auditFormData = ref<any>({
  audit_state: "1",
  content: "",
})
const transferFormData = ref<any>({
  law_user_id: "",
  content: "",
})
const formData = computed(() => {
  return operationType.value == "A" ? auditFormData.value : operationType.value == "T" ? transferFormData.value : {}
})
const formItems = computed(() => {
  return operationType.value == "A"
    ? [
        {
          label: "审核意见",
          field: "audit_state",
          required: true,
          component: ElSelect,
          data: [
            { label: "审核通过", value: "1" },
            { label: "审核不通过", value: "2" },
          ],
        },
        {
          label: "审核备注",
          field: "content",
          required: true,
          component: ElInput,
        },
      ]
    : operationType.value == "T"
    ? [
        {
          label: "转交人员",
          field: "law_user_id",
          required: true,
          component: ElSelect,
          data: userList.value.map((v: any) => {
            return {
              label: v.name,
              value: v.code,
            }
          }),
        },
        {
          label: "转交备注",
          field: "content",
          required: true,
          component: ElInput,
        },
      ]
    : []
})

function detail(row: any) {
  operationType.value = "D"
  queryDetail(row.work_order_id)
}
function audit(row: any) {
  operationType.value = "A"
  auditFormData.value.audit_state = "1"
  auditFormData.value.content = ""
  queryDetail(row.work_order_id)
}
function transfer(row: any) {
  operationType.value = "T"
  transferFormData.value.law_user_id = ""
  transferFormData.value.content = ""
  Rs.post("sys/workOrderOrg/getLawList", {
    data: {
      work_order_id: row.work_order_id,
    },
  }).then((res) => {
    userList.value = res.data.list
    queryDetail(row.work_order_id)
  })
}

function queryDetail(id: string) {
  Rs.post("sys/workOrderOrg/getWorkOrderDetailByOrg", {
    data: {
      work_order_id: id,
    },
  }).then((res) => {
    console.log("WARN", res.data)
    res.data.processInfoList.forEach((item: any) => {
      if (item.picture_url != null) {
        const picList = item.picture_url.split(",")
        const picReall: Array<any> = [] //去除空的
        picList.forEach((pic: string, index: number) => {
          if (pic != "") {
            pic = pic.substring(pic.indexOf("/api/file/"))
            picReall.push({
              uid: index,
              name: "image.png",
              status: "done",
              url: pic,
            })
          }
        })
        item.fileList = picReall
      } else {
        item.fileList = []
      }
    })
    warnDetails.value = res.data
    modal.value.show()
  })
}

function onSave() {
  if (url.value) {
    Rs.post(url.value, { data: formData.value })
  }
}
</script>

<template>
  <VbDataTable
    ref="table"
    :header="cols"
    url="sys/workOrderOrg/getHandingWorkOrderByOrgAdmin"
    method="post"
    :query-params="queryParams"
    :has-checkbox="false"
  >
    <template v-slot:table-tool="">
      <el-form class="align-items-center" :inline="true">
        <el-form-item class="mb-0 me-5 align-items-center" label="商户名称">
          <el-input
            class=""
            :style="dySearchSelectStyle"
            v-model="companyName"
            placeholder="请输入商户名称"
            :size="size"
          />
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center" label="日期">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :size="size"
          />
        </el-form-item>

        <el-form-item class="mb-0 me-5 align-items-center" label="告警类型">
          <DySelect
            v-model="warnType"
            :formatRemoteData="(v:any)=>{return v?.list}"
            :url="'sys/dict/getExceedWarnType?type=1'"
            :style="dySearchSelectStyle"
            placeholder="请选择告警类型"
          ></DySelect>
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center" label="状态：">
          <el-select v-model="workOrderState" placeholder="请选择状态" clearable>
            <el-option value="0" label="待审核"></el-option>
            <el-option value="1" label="待反馈"></el-option>
            <el-option value="2" label="已转交"></el-option>
            <el-option value="3" label="已完结"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mb-0 me-0 align-items-center">
          <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="query">查询</el-button>
          <el-button class="ms-3 mt-0 btn btn-sm btn-light-primary btn-outline" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template #company_name="{ row }">
      <span class="text-primary" @click="jump(row)" style="cursor: pointer">{{ row["company_name"] }}</span>
    </template>
    <template #action="{ row }">
      <span v-if="row.work_order_stats == 0" class="table-action" @click="audit(row)">审核</span>
      <span v-if="row.work_order_stats == 0" class="table-action" @click="transfer(row)">转交</span>
      <span v-else class="table-action" @click="detail(row)">查看详情</span>
    </template>
  </VbDataTable>
  <VbModal v-model:modal="modal" :title="title" :form-data="formData" :form-items="formItems" @confirm="onSave">
    <template #body>
      <ProcessDetail :data="warnDetails"></ProcessDetail>
    </template>
  </VbModal>
</template>