补充

vue/full/src/view/admin/system/equipment/EditDialog.vue

@@ -0,0 +1,166 @@
+<template>
+    <abstract-dialog :loading="loading" :title="title" :value="value" @close="cancel" @open="open">
+        <abstract-form :model="form" :rules="rules">
+            <el-form-item label="名 称" prop="name">
+                <el-input v-model="form.name" :readonly="!canEdit" maxlength="20"/>
+            </el-form-item>
+            <el-form-item label="型 号" prop="spec">
+                <el-input v-model="form.spec" :readonly="!canEdit" maxlength="20"/>
+            </el-form-item>
+            <el-form-item label="制造厂商" prop="supplier">
+                <el-input v-model="form.supplier" :readonly="!canEdit" maxlength="20"/>
+            </el-form-item>
+            <el-form-item label="存放位置" prop="location">
+              <el-input v-model="form.location" :readonly="!canEdit" maxlength="20"/>
+            </el-form-item>
+            <el-form-item label="功能简介" prop="introduction">
+              <el-input v-model="form.introduction" :readonly="!canEdit" maxlength="50"/>
+            </el-form-item>
+            <el-form-item label="制造日期">
+              <el-date-picker
+                  v-model="form.manuDate"
+                  type="date"
+                  value-format="timestamp"
+              />
+            </el-form-item>
+            <el-form-item label="购买日期">
+              <el-date-picker
+                  v-model="form.buyDate"
+                  type="date"
+                  value-format="timestamp"
+              />
+            </el-form-item>
+            <el-form-item label="状 态" prop="enable">
+                <el-radio-group v-model="form.enable" :disabled="!canEdit">
+                    <el-radio :label="true">启用</el-radio>
+                    <el-radio :label="false">禁用</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="备 注" prop="remark">
+                <el-input
+                    v-model="form.remark"
+                    :rows="4"
+                    :readonly="!canEdit"
+                    maxlength="200"
+                    show-word-limit
+                    type="textarea"
+                />
+            </el-form-item>
+        </abstract-form>
+
+        <template v-slot:footer>
+            <el-button plain size="small" @click="closeDialog">取 消</el-button>
+            <el-button v-if="canEdit" size="small" type="primary" @click="confirm">确 定</el-button>
+        </template>
+    </abstract-dialog>
+</template>
+
+<script>
+import dialogMixin from "@/mixin/dialogMixin"
+import AbstractForm from "@/component/abstract/Form"
+import AbstractDialog from '@/component/abstract/Dialog'
+import {add, update} from "@/api/system/equipment"
+import {isEmpty, mergeObj, resetObj} from '@/util'
+import {elConfirm} from "@/util/message"
+
+export default {
+    name: "EditDialog",
+
+    mixins: [dialogMixin],
+
+    components: {AbstractForm, AbstractDialog},
+
+    props: {
+        value: Boolean,
+        type: {type: String, default: 'see'},
+        data: {
+            type: Object,
+            default: () => ({})
+        },
+    },
+
+    data() {
+        return {
+            loading: false,
+            form: {
+                id: null,
+                name: null,
+                spec: null,
+                introduction: null,
+                supplier: null,
+                manuDate: null,
+                buyDate: null,
+                location: null,
+                enable: false,
+                remark: null
+            },
+            rules: {
+                name: [{required: true, message: '名称不能为空', trigger: 'change'}],
+                spec: [{required: true, message: '型号不能为空', trigger: 'change'}],
+                supplier: [{required: true, message: '制造厂商不能为空', trigger: 'change'}],
+                location: [{required: true, message: '存放位置不能为空', trigger: 'change'}],
+            }
+        }
+    },
+
+    computed: {
+        title() {
+            if (isEmpty(this.type)) return ''
+            switch (this.type) {
+                case 'see':
+                    return '设备信息'
+                case 'add':
+                    return '添加设备'
+                case 'edit':
+                    return '编辑设备'
+            }
+        },
+
+        confirmMessage() {
+            switch (this.type) {
+                case 'add':
+                    return `确认添加新的设备【${this.form.name}】?`
+                case 'edit':
+                    return `确认提交对【${this.data.name}】作出的修改？`
+                default:
+                    return ''
+            }
+        },
+
+        canEdit() {
+            return ['add', 'edit'].includes(this.type)
+        }
+    },
+
+    methods: {
+
+        open() {
+            if (this.type !== 'add') mergeObj(this.form, this.data)
+        },
+
+        clearForm() {
+            resetObj(this.form)
+            this.$nextTick(() => this.$refs.form.clearValidate())
+        },
+
+        cancel() {
+            this.closeDialog()
+            this.clearForm()
+        },
+
+        confirm() {
+            if (this.loading) return
+            this.$refs.form.validate(v => {
+                if (!v) return
+                elConfirm(this.confirmMessage)
+                    .then(() => {
+                        this.loading = true
+                        return this.type === 'add' ? add.request(this.form) : update.request(this.form)
+                    })
+                    .then(({msg}) => this.$emit('success', msg))
+                    .finally(() => this.loading = false)
+            })
+        }
+    }
+}
+</script>