|
|
@@ -0,0 +1,401 @@
|
|
|
+<script setup lang="ts" name="Device">
|
|
|
+import rules, { rulesFormat } from "@@/config/rules"
|
|
|
+import apis from "@a"
|
|
|
+import dayjs from "dayjs"
|
|
|
+
|
|
|
+const tableRef = ref()
|
|
|
+const modalRef = ref()
|
|
|
+const pdfPreviewRef = ref()
|
|
|
+const opts = reactive({
|
|
|
+ columns: [
|
|
|
+ { field: "id", name: "设备ID", width: 100, isSort: true, visible: false, tooltip: true },
|
|
|
+ { field: "name", name: "设备名称", visible: true, isSort: false, width: 200, tooltip: true },
|
|
|
+ { field: "status", name: "状态", visible: true, isSort: false, width: 100 },
|
|
|
+ {
|
|
|
+ field: "location",
|
|
|
+ name: "安装位置",
|
|
|
+ visible: true,
|
|
|
+ isSort: false,
|
|
|
+ width: 200,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "manufacturer",
|
|
|
+ name: "厂家",
|
|
|
+ visible: true,
|
|
|
+ isSort: false,
|
|
|
+ width: 200,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ { field: "installationDate", name: "安装日期", visible: true, isSort: false, width: 135 },
|
|
|
+ {
|
|
|
+ field: "responsiblePerson",
|
|
|
+ name: "负责人",
|
|
|
+ visible: true,
|
|
|
+ isSort: false,
|
|
|
+ width: 100,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "responsiblePhone",
|
|
|
+ name: "负责人电话",
|
|
|
+ visible: true,
|
|
|
+ isSort: false,
|
|
|
+ width: 120,
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "manual",
|
|
|
+ name: "说明书",
|
|
|
+ visible: true,
|
|
|
+ isSort: false,
|
|
|
+ width: "auto",
|
|
|
+ tooltip: true
|
|
|
+ },
|
|
|
+ { field: "actions", name: `操作`, width: 150 }
|
|
|
+ ] as any[],
|
|
|
+ queryParams: {
|
|
|
+ name: undefined,
|
|
|
+ status: undefined,
|
|
|
+ location: undefined,
|
|
|
+ manufacturer: undefined,
|
|
|
+ dateRangeInstallationDate: undefined,
|
|
|
+ responsiblePerson: undefined
|
|
|
+ },
|
|
|
+ searchFormItems: [
|
|
|
+ {
|
|
|
+ field: "name",
|
|
|
+ label: "设备名称",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ placeholder: "请输入设备名称",
|
|
|
+ component: "I",
|
|
|
+ listeners: {
|
|
|
+ keyup: (e: KeyboardEvent) => {
|
|
|
+ if (e.code == "Enter") {
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "status",
|
|
|
+ label: "状态",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ component: "Dict",
|
|
|
+ props: {
|
|
|
+ placeholder: "请选择状态",
|
|
|
+ dictType: "device_status",
|
|
|
+ valueIsNumber: 1,
|
|
|
+ type: "select"
|
|
|
+ },
|
|
|
+ listeners: {
|
|
|
+ change: (v: any) => {
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "location",
|
|
|
+ label: "安装位置",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ placeholder: "请输入安装位置",
|
|
|
+ component: "I",
|
|
|
+ listeners: {
|
|
|
+ keyup: (e: KeyboardEvent) => {
|
|
|
+ if (e.code == "Enter") {
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "manufacturer",
|
|
|
+ label: "厂家",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ placeholder: "请输入厂家",
|
|
|
+ component: "I",
|
|
|
+ listeners: {
|
|
|
+ keyup: (e: KeyboardEvent) => {
|
|
|
+ if (e.code == "Enter") {
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "dateRangeInstallationDate",
|
|
|
+ label: "安装日期",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ component: "D",
|
|
|
+ placeholder: "请选择安装日期",
|
|
|
+ props: {
|
|
|
+ type: "daterange",
|
|
|
+ valueFormat: "YYYY-MM-DD",
|
|
|
+ rangeSeparator: "-",
|
|
|
+ startPlaceholder: "开始日期",
|
|
|
+ endPlaceholder: "结束日期"
|
|
|
+ },
|
|
|
+ listeners: {
|
|
|
+ change: (v: any) => {
|
|
|
+ queryParams.value.dateRangeInstallationDate = v
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ span: 5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "responsiblePerson",
|
|
|
+ label: "负责人",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ placeholder: "请输入负责人",
|
|
|
+ component: "I",
|
|
|
+ listeners: {
|
|
|
+ keyup: (e: KeyboardEvent) => {
|
|
|
+ if (e.code == "Enter") {
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ] as any,
|
|
|
+ permission: "device:device",
|
|
|
+ handleBtns: [],
|
|
|
+ handleFuns: {
|
|
|
+ handleCreate,
|
|
|
+ handleUpdate: () => {
|
|
|
+ const row = tableRef.value.getSelected()
|
|
|
+ handleUpdate(row)
|
|
|
+ },
|
|
|
+ handleDelete: () => {
|
|
|
+ const rows = tableRef.value.getSelecteds()
|
|
|
+ handleDelete(rows)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ customBtns: [],
|
|
|
+ tableListFun: apis.device.deviceApi.list,
|
|
|
+ getEntityFun: apis.device.deviceApi.get,
|
|
|
+ deleteEntityFun: apis.device.deviceApi.del,
|
|
|
+ exportUrl: apis.device.deviceApi.exportUrl,
|
|
|
+ exportName: "Device",
|
|
|
+ modalTitle: "设备资产台账",
|
|
|
+ formItems: [
|
|
|
+ {
|
|
|
+ field: "name",
|
|
|
+ label: "设备名称",
|
|
|
+ class: "w-100",
|
|
|
+ required: true,
|
|
|
+ placeholder: "请输入设备名称",
|
|
|
+ component: "I"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "manufacturer",
|
|
|
+ label: "厂家",
|
|
|
+ class: "w-100",
|
|
|
+ required: true,
|
|
|
+ placeholder: "请输入厂家",
|
|
|
+ component: "I"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "location",
|
|
|
+ label: "安装位置",
|
|
|
+ class: "w-100",
|
|
|
+ required: true,
|
|
|
+ placeholder: "请输入安装位置",
|
|
|
+ component: "I"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "installationDate",
|
|
|
+ label: "安装日期",
|
|
|
+ class: "w-100",
|
|
|
+ required: true,
|
|
|
+ component: "D",
|
|
|
+ props: {
|
|
|
+ placeholder: "请选择安装日期",
|
|
|
+ type: "date",
|
|
|
+ valueFormat: "YYYY-MM-DD"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "responsiblePerson",
|
|
|
+ label: "负责人",
|
|
|
+ class: "w-100",
|
|
|
+ required: true,
|
|
|
+ placeholder: "请输入负责人",
|
|
|
+ component: "I"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "responsiblePhone",
|
|
|
+ label: "负责人电话",
|
|
|
+ class: "w-100",
|
|
|
+ required: true,
|
|
|
+ placeholder: "请输入负责人电话",
|
|
|
+ component: "I",
|
|
|
+ rules: [{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: ["blur"] }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "manual",
|
|
|
+ label: "说明书",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ placeholder: "请输入说明书",
|
|
|
+ component: "Vu",
|
|
|
+ props: {
|
|
|
+ uploadType: "file",
|
|
|
+ uploadUrl: "resource/oss/upload/device",
|
|
|
+ fileType: ["pdf", "doc", "docx"],
|
|
|
+ fileSize: 10,
|
|
|
+ limit: 5
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ] as any,
|
|
|
+ resetForm: () => {
|
|
|
+ form.value = emptyFormData.value
|
|
|
+ },
|
|
|
+ labelWidth: "80px",
|
|
|
+ emptyFormData: {
|
|
|
+ id: undefined,
|
|
|
+ name: undefined,
|
|
|
+ status: 0,
|
|
|
+ location: undefined,
|
|
|
+ manufacturer: undefined,
|
|
|
+ installationDate: undefined,
|
|
|
+ responsiblePerson: undefined,
|
|
|
+ responsiblePhone: undefined,
|
|
|
+ manual: undefined
|
|
|
+ }
|
|
|
+})
|
|
|
+const { queryParams, emptyFormData } = toRefs(opts)
|
|
|
+const form = ref<any>(emptyFormData.value)
|
|
|
+
|
|
|
+/** 搜索按钮操作 */
|
|
|
+function handleQuery(query?: any) {
|
|
|
+ query = query || tableRef.value?.getQueryParams() || queryParams.value
|
|
|
+ addDateRange(query, query.dateRangeInstallationDate, "InstallationDate")
|
|
|
+ addDateRange(query, query.dateRangeCreateTime)
|
|
|
+ addDateRange(query, query.dateRangeUpdateTime, "UpdateTime")
|
|
|
+ tableRef.value?.query(query)
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置按钮操作 */
|
|
|
+function resetQuery(query?: any) {
|
|
|
+ query = query || tableRef.value?.getQueryParams() || queryParams.value
|
|
|
+ query.dateRangeInstallationDate = [] as any
|
|
|
+ addDateRange(query, query.dateRangeInstallationDate, "InstallationDate")
|
|
|
+ query.dateRangeCreateTime = [] as any
|
|
|
+ addDateRange(query, query.dateRangeCreateTime)
|
|
|
+ query.dateRangeUpdateTime = [] as any
|
|
|
+ addDateRange(query, query.dateRangeUpdateTime, "UpdateTime")
|
|
|
+ //
|
|
|
+}
|
|
|
+function handleCreate() {
|
|
|
+ tableRef.value.defaultHandleFuns.handleCreate()
|
|
|
+}
|
|
|
+/** 修改按钮操作 */
|
|
|
+function handleUpdate(row: any) {
|
|
|
+ tableRef.value.defaultHandleFuns.handleUpdate("", row)
|
|
|
+}
|
|
|
+
|
|
|
+/** 删除按钮操作 */
|
|
|
+function handleDelete(rows: any[]) {
|
|
|
+ tableRef.value.defaultHandleFuns.handleDelete("", rows)
|
|
|
+}
|
|
|
+
|
|
|
+/** 提交按钮 */
|
|
|
+function submitForm() {
|
|
|
+ apis.device.deviceApi.addOrUpdate(form.value).then(() => {
|
|
|
+ handleQuery()
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function handlePreviewPdf(file: string) {
|
|
|
+ const fileId = file.split("$")[0],
|
|
|
+ fileName = file.split("$")[1]
|
|
|
+ pdfPreviewRef.value.open({
|
|
|
+ fileId,
|
|
|
+ fileName
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <VbDataTable
|
|
|
+ ref="tableRef"
|
|
|
+ keyField="id"
|
|
|
+ :columns="opts.columns"
|
|
|
+ :handle-perm="opts.permission"
|
|
|
+ :handle-btns="opts.handleBtns"
|
|
|
+ :handle-funs="opts.handleFuns"
|
|
|
+ :search-form-items="opts.searchFormItems"
|
|
|
+ :custom-btns="opts.customBtns"
|
|
|
+ :remote-fun="opts.tableListFun"
|
|
|
+ :get-entity-fun="opts.getEntityFun"
|
|
|
+ :delete-entity-fun="opts.deleteEntityFun"
|
|
|
+ :export-url="opts.exportUrl"
|
|
|
+ :export-name="opts.exportName"
|
|
|
+ :modal="modalRef"
|
|
|
+ :reset-form-fun="opts.resetForm"
|
|
|
+ v-model:form-data="form"
|
|
|
+ v-model:query-params="queryParams"
|
|
|
+ :check-multiple="true"
|
|
|
+ :reset-search-form-fun="resetQuery"
|
|
|
+ :custom-search-fun="handleQuery">
|
|
|
+ <template #manual="{ row }">
|
|
|
+ <template v-if="row.manual">
|
|
|
+ <template v-for="(file, key) in row.manual.split(',')" :key="key">
|
|
|
+ <span
|
|
|
+ v-if="file.split('$').length > 1"
|
|
|
+ class="text-primary p-1"
|
|
|
+ @click="handlePreviewPdf(file)">
|
|
|
+ {{ file.split("$")[1] }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template #status="{ row }">
|
|
|
+ <DictTag type="device_status" :value-is-number="1" :value="row.status"></DictTag>
|
|
|
+ </template>
|
|
|
+ <template #installationDate="{ row }">
|
|
|
+ {{ dayjs(row.installationDate).format("YYYY-MM-DD") }}
|
|
|
+ </template>
|
|
|
+ <template #actions="{ row }">
|
|
|
+ <vb-tooltip content="修改" placement="top">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="handleUpdate(row)"
|
|
|
+ v-hasPermission="'device:device:edit'">
|
|
|
+ <template #icon>
|
|
|
+ <VbIcon icon-name="notepad-edit" icon-type="duotone" class="fs-3"></VbIcon>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
+ </vb-tooltip>
|
|
|
+ <vb-tooltip content="删除" placement="top">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="handleDelete([row])"
|
|
|
+ v-hasPermission="'device:device:remove'">
|
|
|
+ <template #icon>
|
|
|
+ <VbIcon icon-name="trash-square" icon-type="duotone" class="fs-3"></VbIcon>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
+ </vb-tooltip>
|
|
|
+ </template>
|
|
|
+ </VbDataTable>
|
|
|
+ <VbModal
|
|
|
+ v-model:modal="modalRef"
|
|
|
+ :title="opts.modalTitle"
|
|
|
+ :form-data="form"
|
|
|
+ :form-items="opts.formItems"
|
|
|
+ :label-width="opts.labelWidth"
|
|
|
+ append-to-body
|
|
|
+ @confirm="submitForm"></VbModal>
|
|
|
+ <VbPdfPreview ref="pdfPreviewRef" />
|
|
|
+ </div>
|
|
|
+</template>
|