UI3/src/views/workNotice/washNotice.vue

<script setup lang="ts">
import { ref, computed } from "vue"
import configs from "@/core/config/Index"
import moment from "moment"
import type { VbFormItem } from "@/components/Forms/models"
import Rs from "@/core/services/RequestService"
import { ElDatePicker, ElInput, ElSelect } from "element-plus"
import { dialog } from "@/core/utils/message"
const table = ref()
const cols = ref([
  {
    name: "序号",
    field: configs.TABLE_INDEX_FIELD,
    width: 60,
  },
  {
    name: "通知名称",
    field: "warn_type_name",
  },
  {
    name: "通知单位",
    field: "org_name",
  },
  {
    name: "通知人",
    field: "notifier",
  },
  {
    name: "通知时间",
    field: "notice_time_str",
  },
  {
    name: "状态",
    field: "stateC",
  },
  {
    name: "操作",
    field: "action",
    width: 150,
  },
])
const size = ref<any>("default")
const dySearchSelectStyle = { width: "180px" }
const state = ref("")
const queryParams = ref<any>({
  type: "1",
  state: state.value,
})

const selectList = [
  {
    label: "未回复",
    value: "0",
  },
  {
    label: "已回复",
    value: "1",
  },
]

function query() {
  queryParams.value = {
    type: "1",
    state: state.value,
  }
}
function reset() {
  state.value = ""
  query()
}
const operationType = ref<"D" | "R">("D")
const modal = ref()
const modalTitle = computed(() => {
  return operationType.value == "D" ? "通知详情" : operationType.value == "R" ? "回复通知" : ""
})
const formData = ref<any>({})
const formItems = computed(() => {
  return (
    operationType.value == "R"
      ? [
          {
            label: "是否清洗",
            field: "is_clear",
            placeholder: "请选择处理状态",
            required: true,
            component: ElSelect,
            data: [
              {
                label: "未清洗",
                value: "0",
              },
              {
                label: "已清洗",
                value: "1",
              },
            ],
            span: 12,
          },
          {
            label: "清洗日期",
            field: "clear_date",
            required: true,
            component: ElDatePicker,
            props: {
              type: "date",
              placeholder: "请选择清洗日期",
            },
            span: 12,
          },
          {
            label: "回复备注",
            field: "remark",
            placeholder: "请输入回复备注",
            component: ElInput,
            type: "textarea",
            span: 24,
          },
        ]
      : operationType.value == "D"
      ? []
      : []
  ) as Array<VbFormItem>
})
const details = ref<any>({})
function detail(row: any) {
  operationType.value = "D"
  details.value = Object.assign({}, row)
  modal.value.show()
}
function reply(row: any) {
  operationType.value = "R"
  formData.value = {
    id: row.id,
    is_clear: "0",
    clear_date: new Date(),
    remark: "",
  }
  modal.value.show()
}

function onSave() {
  if (operationType.value == "D") {
    return
  }
  dialog.confirm("回复只能提交一次，点击取消检查确认，点击确定立刻提交回复！", "确认回复", function (v: any) {
    if (v.isConfirmed) {
      formData.value.clear_date = moment(formData.value.clear_date).format("YYYYMMDD")
      Rs.post("sys/notice/reply", { data: formData.value }).then(() => {
        table.value.search()
        modal.value.hide()
      })
    }
  })
}
</script>

<template>
  <VbDataTable
    ref="table"
    :header="cols"
    url="sys/notice/selectNoticeList"
    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-select v-model="state" :style="dySearchSelectStyle" placeholder="请选择处理状态" :size="size">
            <el-option v-for="(v, i) in selectList" :key="i" :label="v.label" :value="v.value"></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 #stateC="{ row }">
      <span v-if="row.state == '0'" class="badge badge-primary">未回复</span>
      <span v-if="row.state == '1'" class="badge badge-success">已回复</span>
    </template>
    <template #action="{ row }">
      <span class="table-action" @click="detail(row)">详情</span>
      <span v-if="row.state == '0'" class="table-action" @click="reply(row)">回复</span>
    </template>
  </VbDataTable>
  <VbModal
    v-model:modal="modal"
    v-model:form-data="formData"
    :form-items="formItems"
    :title="modalTitle"
    :confirm-btn="operationType == 'R'"
    :close-btn-class="`btn btn-${operationType == 'R' ? 'light' : 'primary'}`"
    :save-auto-close="false"
    @confirm="onSave"
  >
    <template v-if="operationType == 'D'" #body>
      <div style="border-bottom: 1px solid rgba(232, 232, 232, 1); padding: 10px 30px 24px; margin-bottom: 24px">
        <p style="color: #1890ff; padding-bottom: 10px">您有新的清洗任务需要马上执行</p>
        <p>
          设施名称：
          <span style="color: #1890ff">{{ details.device_name }}</span>
        </p>
        <p>
          清洗周期（天）：
          <span style="color: #1890ff">{{ details.clean_cycle_day }}天</span>
        </p>
        <p>
          清洗周期（小时）：
          <span style="color: #1890ff">{{ details.clean_cycle_hour }}小时</span>
        </p>
        <p style="color: #ff0000; padding-top: 10px">清洗后请上传凭证</p>
      </div>
      <el-row>
        <el-col :offset="18" :span="6">
          <dl>
            <dt>通知人：</dt>
            <dd>{{ details.notifier }}</dd>
          </dl>
        </el-col>
        <el-col :offset="18" :span="6">
          <dl>
            <dt>通知部门：</dt>
            <dd>{{ details.org_name }}</dd>
          </dl>
        </el-col>
      </el-row>
    </template>
  </VbModal>
</template>