UI3/src/views/warn/abnormal_declare.vue

<script setup lang="ts">
import { ref, computed } from "vue"
import configs from "@/core/config/Index"
import moment from "moment"
import DySelect from "@/components/select/DySelect.vue"
import { ElDatePicker, ElInput } from "element-plus"
import type { VbFormItem } from "@/components/Forms/models"
import Rs from "@/core/services/RequestService"

const table = ref()
const cols = ref<any>([
  {
    name: "序号",
    field: configs.TABLE_INDEX_FIELD,
    width: 60,
  },
  {
    name: "设施名称",
    field: "device_name",
  },
  {
    name: "申报时间",
    field: "abnormal_date",
  },
  {
    name: "申报周期",
    field: "maintain_times",
    width: 350,
  },

  {
    name: "申报类型",
    field: "declare_type_name",
  },
  {
    name: "审批状态",
    field: "audit_state_name",
  },
  {
    name: "操作",
    field: "action",
    width: 160,
  },
])
const size = ref<any>("default")
const dySearchSelectStyle = { width: "180px" }
const auditStateSelectList = [
  {
    label: "未审核",
    value: "0",
  },
  {
    label: "审核通过",
    value: "1",
  },
  {
    label: "审核未通过",
    value: "2",
  },
]
const auditState = ref("")
const dateRange = ref<any>("")
const queryParams = ref({
  audit_state: auditState.value,
  declare_time_query_start: "",
  declare_time_query_end: "",
})
function query() {
  if (dateRange.value[0]) {
    queryParams.value = {
      audit_state: auditState.value,
      declare_time_query_start: moment(dateRange.value[0]).format("YYYYMMDD"),
      declare_time_query_end: moment(dateRange.value[1]).format("YYYYMMDD"),
    }
  } else {
    queryParams.value = {
      audit_state: auditState.value,
      declare_time_query_start: "",
      declare_time_query_end: "",
    }
  }
}
function reset() {
  auditState.value = ""
  dateRange.value = ""
  query()
}
const operationType = ref<"D" | "C">("D")
const modal = ref()
const modalTitle = computed(() => {
  return operationType.value == "C" ? "添加申报" : operationType.value == "D" ? "申报详情" : ""
})
const formItems = computed(() => {
  return (
    operationType.value == "C"
      ? [
          {
            label: "维护设备",
            field: "device_id",
            placeholder: "请选择维护设备",
            required: true,
            component: DySelect,
            props: {
              url: "sys/monitor/getDeviceList",
            },
            span: 12,
          },
          {
            label: "维护类型",
            field: "maintain_type",
            placeholder: "请选择维护类型",
            required: true,
            component: DySelect,
            props: {
              url: "sys/dict/getList?code=000120001&key=temp",
              formatRemoteData: (v: any) => {
                return v?.list
              },
            },
            span: 12,
          },
          {
            label: "维护周期",
            field: "date",
            required: true,
            component: ElDatePicker,
            props: {
              type: "datetimerange",
              startPlaceholder: "开始时间",
              endPlaceholder: "结束时间",
              rangeSeparator: "~",
              format: "YYYY-MM-DD HH:mm",
              disabledDate: (v: any) => {
                if (v <= moment().add(7, "day")) {
                  if (v >= moment().startOf("day")) {
                    return false
                  }
                }
                return true
              },
            },
            span: 24,
          },
          {
            label: "申报备注",
            field: "description",
            placeholder: "请输入申报备注",
            component: ElInput,
            type: "textarea",
            span: 24,
          },
        ]
      : operationType.value == "D"
      ? []
      : []
  ) as Array<VbFormItem>
})
const formData = ref<any>({})
const emptyDate = {
  device_id: "",
  description: "",
  maintain_type: "",
}
function add() {
  operationType.value = "C"
  formData.value = Object.assign({}, emptyDate)
  formData.value.date = ""
  modal.value.show()
}
const details = ref<any>({})
function detail(row: any) {
  operationType.value = "D"
  details.value = {
    device_name: row.device_name,
    description: row.description,
    maintain_times: row.maintain_times.substring(0, 19),
    maintain_times_end: row.maintain_times.substring(20, 39),
    maintain_type_name: row.maintain_type_name,
  }
  modal.value.show()
}
function onSave() {
  if (operationType.value == "D") {
    return
  }
  const data = {
    device_id: formData.value.device_id,
    declare_type: "1",
    description: formData.value.description,
    maintain_type: formData.value.maintain_type,
    begin_date: moment(formData.value.date[0]).format("YYYYMMDDHHmmss"),
    end_date: moment(formData.value.date[1]).format("YYYYMMDDHHmmss"),
  }
  Rs.post("sys/companyDeclare/newDeclare", { data }).then(() => {
    table.value.search()
  })
}
</script>

<template>
  <VbDataTable
    ref="table"
    :header="cols"
    url="sys/companyDeclare/getCompanyMaintainList"
    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">
          <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="add">新建申报</el-button>
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center" label="审批状态">
          <el-select v-model="auditState" :style="dySearchSelectStyle" :size="size" placeholder="请选择审批状态">
            <el-option v-for="(v, i) in auditStateSelectList" :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" label="日期">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="default"
          />
        </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 #abnormal_date="{ row }">
      {{ moment(row.abnormal_date, "YYYYMMDDHHmmss").format("YYYY-MM-DD") }}
    </template>
    <template #audit_state_name="{ row }">
      <span
        class="badge"
        :class="`badge-${row.audit_state == 0 ? 'primary' : row.audit_state == 1 ? 'success' : 'danger'}`"
      >
        {{ row["audit_state_name"] }}
      </span>
    </template>

    <template #action="{ row }">
      <span class="table-action" @click="detail(row)">申报详情</span>
    </template>
  </VbDataTable>
  <VbModal
    v-model:modal="modal"
    v-model:form-data="formData"
    :form-items="formItems"
    :title="modalTitle"
    :confirm-btn="operationType == 'C'"
    :close-btn-class="`btn btn-${operationType == 'C' ? 'light' : 'primary'}`"
    @confirm="onSave"
  >
    <template v-if="operationType == 'D'" #body>
      <el-row>
        <el-col :span="12">
          <dl>
            <dt>维护设备：</dt>
            <dd>{{ details.device_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>维护类型：</dt>
            <dd>{{ details.maintain_type_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>开始时间：</dt>
            <dd>{{ details.maintain_times }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>结束时间：</dt>
            <dd>{{ details.maintain_times_end }}</dd>
          </dl>
        </el-col>
        <el-col :span="24">
          <dl>
            <dt>申报备注：</dt>
            <dd>{{ details.description }}</dd>
          </dl>
        </el-col>
      </el-row>
    </template>
  </VbModal>
</template>