新增仓库管理页面

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

@@ -0,0 +1,154 @@
+<template>
+    <abstract-dialog :loading="loading" :title="title" :value="value" @close="cancel" @open="open">
+        <abstract-form :model="form" :rules="rules">
+            <el-form-item label="编 码" prop="id">
+                <el-input v-model="form.id" :readonly="!canEdit" maxlength="20"/>
+            </el-form-item>
+            <el-form-item label="名 称" prop="name">
+                <el-input v-model="form.name" :readonly="!canEdit" maxlength="20"/>
+            </el-form-item>
+            <el-form-item label="级 别" prop="level">
+                <el-select v-model="form.level" clearable @clear="form.level=null">
+                  <el-option :value="1" label="一级"/>
+                  <el-option :value="2" label="二级"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="类 型" prop="type">
+              <el-select v-model="form.type" clearable @clear="form.type=null">
+                <el-option :value="1" label="常温"/>
+                <el-option :value="2" label="冷藏"/>
+              </el-select>
+            </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/storehouse"
+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,
+                level: null,
+                type: null,
+                enable: false,
+                remark: null
+            },
+            rules: {
+                id: [{required: true, message: '编号不能为空', trigger: 'change'}],
+                level: [{required: true, message: '级别不能为空', trigger: 'change'}],
+                type: [{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>

vue/full/src/view/admin/system/storehouse/indexPage.vue

@@ -0,0 +1,180 @@
+<template>
+  <list-page :data="listPageConfig">
+    <template v-slot:searchForm>
+      <el-form-item label="编 码">
+        <el-input v-model="searchForm.id" clearable maxlength="100"/>
+      </el-form-item>
+      <el-form-item label="名 称">
+        <el-input v-model="searchForm.name" clearable maxlength="100"/>
+      </el-form-item>
+      <el-form-item label="级 别">
+        <el-select v-model="searchForm.level" clearable @clear="searchForm.level=null">
+          <el-option :value="1" label="一级"/>
+          <el-option :value="2" label="二级"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="类 型">
+        <el-select v-model="searchForm.type" clearable @clear="searchForm.type=null">
+          <el-option :value="1" label="常温"/>
+          <el-option :value="2" label="冷藏"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状 态">
+        <el-select v-model="searchForm.enable" clearable @clear="searchForm.enable=null">
+          <el-option :value="0" label="停用"/>
+          <el-option :value="1" label="启用"/>
+        </el-select>
+      </el-form-item>
+    </template>
+
+    <template v-slot:tableColumn>
+      <el-table-column align="center" label="编 码" prop="id" width="80"/>
+      <el-table-column align="center" label="名 称" prop="name" show-overflow-tooltip/>
+      <el-table-column align="center" label="级 别" show-overflow-tooltip>
+        <template v-slot="{row}">{{ row.level == 1 ? '一级' : '二级' }}</template>
+      </el-table-column>
+      <el-table-column align="center" label="类 型" show-overflow-tooltip>
+        <template v-slot="{row}">{{ row.type == 1 ? '常温' : '冷藏' }}</template>
+      </el-table-column>
+
+      <el-table-column align="center" label="状 态" width="120">
+        <template v-slot="{row}">
+          <span :class="row.enable ? 'success' : 'error'" class="dot"/>
+          <span>{{ row.enable ? '启用' : '禁用' }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="创建人" prop="pname" show-overflow-tooltip/>
+      <el-table-column align="center" label="创建时间" width="150">
+        <template v-slot="{row}">{{ row.ptime | timestamp2Date }}</template>
+      </el-table-column>
+    </template>
+
+    <edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/>
+  </list-page>
+</template>
+<script>
+import tableMixin from '@/mixin/tablePageMixin'
+import ListPage from '@/view/_common/ListPage'
+import EditDialog from './EditDialog'
+import {add, update, del, search} from "@/api/system/storehouse"
+import {isEmpty} from '@/util'
+import {wic} from "@/util/auth"
+import {elConfirm, elError, elSuccess} from "@/util/message"
+
+export default {
+  name: "storehouseManagement",
+
+  mixins: [tableMixin],
+
+  components: {ListPage, EditDialog },
+
+  data() {
+    return {
+      searchForm: {
+        id: '',
+        name: '',
+        level: '',
+        type: '',
+        enable: null,
+      },
+      temp: {
+        createTime: []
+      },
+      editDialog: false
+    }
+  },
+
+  computed: {
+    ...wic({add, update, del}),
+
+    listPageConfig() {
+      return {
+        pageLoading: this.config.operating,
+        buttons: [
+          this.canAdd && {icon: 'el-icon-plus', e: this.add, content: '添 加'},
+          {icon: 'el-icon-view', e: this.see, content: '查 看'},
+          this.canUpdate && {icon: 'el-icon-edit', e: this.edit, content: '编 辑'},
+          this.canDel && {icon: 'el-icon-delete', e: this.del, content: '删 除'}
+        ],
+        dataLoading: this.config.loading,
+        search: {
+          props: {model: this.searchForm},
+          on: {search: this.search}
+        },
+        table: {
+          props: {data: this.tableData},
+          on: {'row-click': this.rowClick}
+        },
+        pagination: {
+          props: {model: this.searchForm},
+          on: {'current-change': this.pageChange}
+        }
+      }
+    }
+  },
+
+  methods: {
+    mergeSearchForm() {
+      return {
+        ...this.searchForm,
+        startTime: this.temp.createTime ? this.temp.createTime[0] : null,
+        endTime: this.temp.createTime ? this.temp.createTime[1] + 86400000 : null
+      }
+    },
+
+    search() {
+      if (this.config.loading) return
+      this.config.loading = true
+      this.row = null
+      this.type = 'see'
+      search
+          .request(this.mergeSearchForm())
+          .then(({data: {list, total}}) => {
+            this.searchForm.total = total
+            this.tableData = list
+            console.log(list,total)
+          })
+
+          .finally(() => this.config.loading = false)
+    },
+
+    add() {
+      this.row = null
+      this.type = 'add'
+      this.editDialog = true
+    },
+
+    see() {
+      if (isEmpty(this.row)) return elError('请选择要查看的仓库')
+      this.type = 'see'
+      this.editDialog = true
+    },
+
+    edit() {
+      if (isEmpty(this.row)) return elError('请选择要编辑的仓库')
+      this.type = 'edit'
+      this.editDialog = true
+    },
+
+    del() {
+      if (isEmpty(this.row)) return elError('请选择要删除的仓库')
+      if (this.row.enable) return elError('已启用的仓库不能删除')
+      if (this.config.operating) return
+      elConfirm(`确定删除仓库【${this.row.name}】？`)
+          .then(() => {
+            this.config.operating = true
+            return del.request({id: this.row.id, name: this.row.name})
+          })
+          .then(() => this.success('删除成功'))
+          .finally(() => this.config.operating = false)
+    },
+
+    success(msg) {
+      elSuccess(msg)
+      this.editDialog = false
+      this.search()
+    }
+  }
+}
+</script>