123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- <template>
- <a-card :bordered="false" v-show="visible" class="card" :title="modalTitle">
- <a-row :gutter="48" slot="extra">
- <a-col :md="48" :sm="48">
- <span class="table-page-search-submitButtons" style="float: right">
- <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
- <a-button style="margin-left: 8px" type="default" @click="handleCancel()">返回</a-button>
- </span>
- </a-col>
- </a-row>
- <a-form :form="form">
- <a-form-item v-show="false">
- <a-input v-decorator="['id']" type="hidden" />
- </a-form-item>
- <row-list :col="2">
- <row-item>
- <a-form-item label="菜单名称" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
- <a-input v-decorator="['name', {rules: [{required: true, message: '菜单名称不能为空'}]}]" />
- </a-form-item>
- </row-item>
- <row-item>
- <a-form-item label="路由地址" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
- <a-input v-decorator="['routerUrl', {rules: [{required: true, message: '路由地址不能为空'}]}]" />
- </a-form-item>
- </row-item>
- <row-item>
- <a-form-item label="图标地址" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
- <Upload v-decorator="['iconPath']" />
- </a-form-item>
- </row-item>
- <row-item>
- <a-form-item label="备注" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
- <a-input v-decorator="['remark']" />
- </a-form-item>
- </row-item>
- </row-list>
- </a-form>
- </a-card>
- </template>
- <script>
- import Upload from '@/components/Upload/CUploadImg.vue'
- import pick from 'lodash.pick'
- import { addCommonMenu, updateCommonMenu } from '@/api/common/menu'
- export default {
- name: 'BaseCommonMenu',
- components: {
- Upload,
- },
- data() {
- return {
- confirmLoading: false,
- modalTitle: null,
- form: this.$form.createForm(this),
- visible: false,
- files: [],
- // 下拉框map
- }
- },
- props: {},
- created() {
- // 下拉框map
- },
- methods: {
- base(record) {
- this.visible = true
- // 如果是空标识添加
- if (this.BaseTool.Object.isBlank(record)) {
- this.modalTitle = '添加'
- return
- }
- this.modalTitle = '编辑'
- record.iconPath = [
- {
- uid: -1,
- name: 'icon',
- status: 'done',
- url: record.iconPath,
- },
- ]
- const {
- form: { setFieldsValue },
- } = this
- // 日期处理
- this.$nextTick(() => {
- setFieldsValue(Object.assign(pick(record, ['id', 'name', 'routerUrl', 'iconPath', 'remark'])))
- })
- },
- save() {
- const {
- form: { validateFieldsAndScroll },
- } = this
- this.confirmLoading = true
- validateFieldsAndScroll((errors, values) => {
- if (errors) {
- this.confirmLoading = false
- return
- }
- // 日期处理
- values.iconPath = values.iconPath[0].url
- if (this.BaseTool.String.isBlank(values.id)) {
- addCommonMenu(values)
- .then(() => {
- this.handleCancel(values)
- })
- .catch(() => {
- this.confirmLoading = false
- })
- } else {
- updateCommonMenu(values)
- .then(() => {
- this.handleCancel(values)
- })
- .catch(() => {
- this.confirmLoading = false
- })
- }
- })
- },
- handleCancel(values) {
- this.visible = false
- this.confirmLoading = false
- this.form.resetFields()
- if (this.BaseTool.Object.isNotBlank(values)) {
- this.$emit('ok', values)
- } else {
- this.$emit('ok')
- }
- },
- },
- }
- </script>
|