mt-ck-00a/mt-ck-wms-ui
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

init

Browse Source
This commit is contained in:
gtz217
2021-09-13 14:56:28 +08:00
commit ac0d6e9083
777 changed files with 90286 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/views/MenuManager/AddForm.vue Normal file
View File

@@ -0,0 +1,115 @@
<template>
<div>
<el-dialog v-bind="$attrs" :title="'formItem.menu.add'| i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-form-item :label="$t('menuManage.menuCode')" prop="code">
<el-input v-model="formData.code" :placeholder="['placeholder.input', $t('menuManage.menuCode')] | i18nFilterForm" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item :label="$t('menuManage.type')" prop="type">
<el-select v-model="formData.type" :placeholder="['placeholder.select', $t('menuManage.type')] | i18nFilterForm" clearable :style="{width: '100%'}">
<el-option
label="module"
value="1"
/>
<el-option
label="menu"
value="2"
/>
<el-option
label="button"
value="3"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('menuManage.href')" prop="href">
<el-input v-model="formData.href" :placeholder="['placeholder.input', $t('menuManage.href')] | i18nFilterForm" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item :label="$t('menuManage.menuName')" prop="name">
<el-input v-model="formData.name" :placeholder="['placeholder.input', $t('menuManage.menuName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item :label="$t('menuManage.remark')" prop="remark">
<el-input v-model="formData.remark" :placeholder="['placeholder.input', $t('menuManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
<el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { addMenu } from '@/api/menu'
export default {
components: {},
inheritAttrs: false,
props: [],
data() {
return {
formData: {
code: undefined,
type: undefined,
href: undefined,
name: undefined,
remark: undefined
},
rules: {
code: [{
required: true,
message: this.$i18nForm(['placeholder.input', this.$t('menuManage.menuCode')]),
trigger: 'blur'
}],
type: [{
required: true,
message: this.$i18nForm(['placeholder.select', this.$t('menuManage.type')]),
trigger: 'change'
}],
href: [],
name: [{
required: true,
message: this.$i18nForm(['placeholder.input', this.$t('menuManage.menuName')]),
trigger: 'blur'
}],
remark: []
},
iconOptions: [{
'label': '选项一',
'value': 1
}, {
'label': '选项二',
'value': 2
}]
}
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
onOpen() {},
onClose() {
this.$refs['elForm'].resetFields()
},
close() {
this.$emit('update:visible', false)
},
handelConfirm() {
this.$refs['elForm'].validate(async valid => {
if (!valid) return
const result = await addMenu(this.formData)
if (result.code === 0) {
this.$message({
type: 'success',
message: '添加成功！'
})
this.$emit('done')
}
this.close()
})
}
}
}
</script>
<style>
</style>

105
src/views/MenuManager/EditForm.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<div>
<el-dialog v-bind="$attrs" :title="'formItem.menu.edit'| i18nFilter" v-on="$listeners" @open="onOpen" @close="onClose">
<el-form ref="" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-form-item :label="$t('menuManage.menuCode')" prop="code">
<el-input v-model="formData.code" :placeholder="['placeholder.input', $t('menuManage.menuCode')] | i18nFilterForm" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item :label="$t('menuManage.icon')" prop="icon">
<el-select v-model="formData.icon" :placeholder="['placeholder.select', $t('menuManage.icon')] | i18nFilterForm" clearable :style="{width: '100%'}">
<el-option
v-for="(item, index) in iconOptions"
:key="index"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('menuManage.href')" prop="href">
<el-input v-model="formData.href" :placeholder="['placeholder.input', $t('menuManage.href')] | i18nFilterForm" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item :label="$t('menuManage.menuName')" prop="name">
<el-input v-model="formData.name" :placeholder="['placeholder.input', $t('menuManage.menuName')] | i18nFilterForm" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item :label="$t('menuManage.remark')" prop="remark">
<el-input v-model="formData.remark" :placeholder="['placeholder.input', $t('menuManage.remark')] | i18nFilterForm" clearable :style="{width: '100%'}" />
</el-form-item>
<el-form-item :label="$t('menuManage.menustartstop')" prop="enabled">
<el-switch v-model="formData.enabled" />
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
<el-button type="primary" @click="handelConfirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
components: {},
inheritAttrs: false,
props: [],
data() {
return {
formData: {
code: undefined,
icon: undefined,
href: undefined,
name: undefined,
remark: undefined,
enabled: true
},
rules: {
code: [{
required: true,
message: this.$i18nForm(['placeholder.input', this.$t('menuManage.menuCode')]),
trigger: 'blur'
}],
icon: [{
required: true,
message: this.$i18nForm(['placeholder.select', this.$t('menuManage.icon')]),
trigger: 'change'
}],
href: [],
name: [{
required: true,
message: this.$i18nForm(['placeholder.input', this.$t('menuManage.menuName')]),
trigger: 'blur'
}],
remark: []
},
iconOptions: [{
'label': '选项一',
'value': 1
}, {
'label': '选项二',
'value': 2
}]
}
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
onOpen() {},
onClose() {
this.$refs[''].resetFields()
},
close() {
this.$emit('update:visible', false)
},
handelConfirm() {
this.$refs[''].validate(valid => {
if (!valid) return
this.close()
})
}
}
}
</script>
<style>
</style>

192
src/views/MenuManager/index.vue Normal file
View File

@@ -0,0 +1,192 @@
<template>
<div style="margin:20px">
<div style="margin:20px">
<el-button type="primary" @click="addOrUpdateHandle()">{{ 'btn.add' | i18nFilter }}</el-button>
</div>
<el-table
:data="menuList"
:header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
:stripe="true"
highlight-current-row
row-key="id"
border
style="width: 100%; "
>
<el-table-column
prop="name"
header-align="center"
align="left"
width="200px"
:label="$t('menuManage.menuName')"
/>
<el-table-column
prop="code"
header-align="center"
align="center"
:label="$t('menuManage.menuCode')"
/>
<el-table-column
prop="enName"
header-align="center"
align="center"
:label="$t('menuManage.enName')"
/>
<el-table-column
prop="category"
header-align="center"
align="center"
:label="$t('menuManage.menuClassify')"
>
<template slot-scope="scope">
{{ scope.row.category|commonFilter(basicData('roleType')) }}
</template>
</el-table-column>
<el-table-column
prop="type"
header-align="center"
align="center"
:label="$t('menuManage.type')"
>
<template slot-scope="scope">
{{ scope.row.type|commonFilter(basicData('menuType')) }}
</template>
</el-table-column>
<el-table-column
prop="parentName"
header-align="center"
align="center"
:label="$t('menuManage.parentName')"
/>
<el-table-column
prop="sortNo"
header-align="center"
align="center"
:label="$t('menuManage.sortNumber')"
/>
<el-table-column
prop="icon"
header-align="center"
align="center"
:label="$t('menuManage.icon')"
>
<template slot-scope="scope">
<svg-icon :icon-class="scope.row.icon || ''" />
</template>
</el-table-column>
<el-table-column
prop="href"
header-align="center"
align="center"
:show-overflow-tooltip="true"
:label="$t('menuManage.menuURL')"
/>
<el-table-column
fixed="right"
header-align="center"
align="center"
:label="'tableHeader.operation' | i18nFilter"
>
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ 'btn.edit' | i18nFilter }}</el-button>
<span style="margin:0 3px">|</span>
<el-button type="text" size="small" @click="deleteHandle(scope.row)">{{ 'btn.delete' | i18nFilter }}</el-button>
</template>
</el-table-column>
</el-table>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
</div>
</template>
<script>
import AddOrUpdate from './menu-add-or-update'
import { getMenuList, delMenu } from '@/api/menu'
import basicData from '@/filters/basicData'
export default {
components: {
AddOrUpdate
},
filters: {
commonFilter: (source, filterType = a => a) => {
return filterType(source)
}
},
data() {
return {
menuList: [],
dataList: [],
basicData,
dataListLoading: false,
addOrUpdateVisible: false,
listQuery: {
current: 1,
size: 550
}
}
},
created() {
this.getDataList()
},
methods: {
// 获取数据列表
async getDataList() {
this.dataListLoading = false
this.dataList.splice(0, this.dataList.length)
const res = await getMenuList(this.listQuery)
if (res.code === 0) {
this.dataList = res.data
this.dataListLoading = false
}
this.setMenuList()
},
// 新增 / 修改
addOrUpdateHandle(id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
// 删除
deleteHandle(row) {
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${row.name}]?`, this.$t('module.basicData.visual.Tips'), {
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
type: 'warning'
}).then(() => {
delMenu(row.id).then(response => {
this.$message({
message: this.$t('module.basicData.visual.success'),
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
})
}).catch(() => {})
},
setMenuList() {
this.menuList.splice(0, this.menuList.length)
this.dataList.forEach(item => {
if (item.parentId === '0') {
this.menuList.push(item)
} else {
this.append(item)
}
})
},
append(child) {
this.dataList.forEach(item => {
if (child.parentId === item.id) {
child.parentName = item.name
if (!item.children) {
this.$set(item, 'children', [])
}
item.children.push(child)
}
})
}
}
}
</script>

267
src/views/MenuManager/menu-add-or-update.vue Normal file
View File

@@ -0,0 +1,267 @@
<template>
<el-dialog
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
:close-on-click-modal="false"
:visible.sync="visible"
>
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="80px" @keyup.enter.native="dataFormSubmit()">
<el-form-item :label="$t('menuManage.type')" prop="type">
<el-radio-group v-model="dataForm.type">
<el-radio v-for="(type, index) in typeList" :key="index" :label="index">{{ type }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="typeList[dataForm.type] + $t('menuManage.name')" prop="name">
<el-input v-model="dataForm.name" :placeholder="typeList[dataForm.type] + $t('menuManage.name')" />
</el-form-item>
<el-form-item :label="$t('menuManage.parentName')" prop="parentName">
<el-popover
ref="menuListPopover"
placement="bottom-start"
:disabled="Boolean(dataForm.id)"
trigger="click"
>
<el-tree
ref="menuListTree"
:data="menuList"
:props="menuListTreeProps"
node-key="id"
:highlight-current="true"
:expand-on-click-node="false"
@current-change="menuListTreeCurrentChangeHandle"
/>
</el-popover>
<el-input v-model="dataForm.parentName" v-popover:menuListPopover :placeholder="$i18nForm(['placeholder.input', $t('menuManage.parentName')])" readonly class="menu-list__input" />
</el-form-item>
<el-form-item :label="$t('menuManage.menuCode')" prop="code">
<el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('menuManage.menuCode')])" clearable />
</el-form-item>
<el-form-item :label="$t('menuManage.enName')" prop="enName">
<el-input v-model="dataForm.enName" :placeholder="$i18nForm(['placeholder.input', $t('menuManage.enName')])" clearable />
</el-form-item>
<el-form-item v-if="dataForm.type === 1" :label="$t('menuManage.menuURL')" prop="href">
<el-input v-model="dataForm.href" :placeholder="$i18nForm(['placeholder.input', $t('menuManage.menuURL')])" />
</el-form-item>
<el-form-item v-if="dataForm.type !== 0" :label="$t('menuManage.authorizationMark')" prop="permission">
<el-input v-model="dataForm.permission" :placeholder="$i18nForm(['placeholder.input', $t('menuManage.permissionText')])" />
</el-form-item>
<el-form-item v-if="dataForm.type !== 2" :label="$t('menuManage.sortNumber')" prop="sortNo">
<el-input-number v-model="dataForm.sortNo" controls-position="right" :min="0" />
</el-form-item>
<el-form-item v-if="dataForm.type !== 2" :label="$t('menuManage.icon')" prop="icon">
<el-row>
<el-col :span="22">
<el-popover
ref="iconListPopover"
placement="bottom-start"
trigger="click"
popper-class="mod-menu__icon-popover"
>
<div class="mod-menu__icon-inner">
<div class="mod-menu__icon-list">
<el-button
v-for="(item, index) in iconList"
:key="index"
:class="{ 'is-active': item === dataForm.icon }"
@click="iconActiveHandle(item)"
>
<svg-icon :icon-class="item" />
</el-button>
</div>
</div>
</el-popover>
<el-input v-model="dataForm.icon" v-popover:iconListPopover readonly :placeholder="$t('menuManage.icon')" class="icon-list__input" @change="$forceUpdate()" />
</el-col>
</el-row>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
</span>
</el-dialog>
</template>
<script>
import { getMenuList, addMenu, editMenu, getMenuDetail } from '@/api/menu'
import Icon from '@/icons'
export default {
data() {
var validateUrl = (rule, value, callback) => {
if (this.dataForm.type === 1 && !/\S/.test(value)) {
callback(new Error('菜单URL不能为空'))
} else {
callback()
}
}
return {
visible: false,
typeList: ['目录', '菜单', '按钮'],
dataForm: {
id: '',
type: 1,
name: '',
code: '',
parentId: 0,
category: '1',
parentName: '',
icon: '',
enName: '',
href: '',
permission: '',
sortNo: 0
},
dataRule: {
name: [
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('menuManage.menuName')]), trigger: 'blur' }
],
parentName: [
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('menuManage.parentName')]), trigger: 'change' }
],
href: [
{ validator: validateUrl, trigger: 'blur' }
]
},
menuList: [],
dataList: [],
menuListTreeProps: {
label: 'name',
children: 'children'
},
listQuery: {
current: 1,
size: 550
},
iconList: []
}
},
created() {
this.iconList = Icon.getNameList()
},
methods: {
// 获取数据列表
async init(id) {
this.visible = true
this.dataForm.id = id || ''
this.dataList.splice(0, this.dataList.length)
const res = await getMenuList(this.listQuery)
if (res.code === 0) {
this.dataList = res.data
}
this.setMenuList()
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
getMenuDetail(this.dataForm.id).then(res => {
this.dataForm = res.data
})
}
})
},
// 菜单树选中
menuListTreeCurrentChangeHandle(data, node) {
this.dataForm.parentId = data.id
this.dataForm.parentName = data.name
},
// 菜单树设置当前选中节点
menuListTreeSetCurrentNode() {
this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId)
this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name']
},
// 图标选中
iconActiveHandle(iconName) {
this.dataForm.icon = iconName
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
const data = this.dataForm
if (this.dataForm.id) {
editMenu(data).then(res => {
this.$message({
message: this.$t('module.basicData.visual.success'),
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
})
} else {
addMenu(data).then(res => {
this.$message({
message: this.$t('module.basicData.visual.success'),
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
})
}
}
})
},
setMenuList() {
this.menuList.splice(0, this.menuList.length)
this.dataList.forEach(item => {
if (item.parentId === '0') {
this.menuList.push(item)
} else {
this.append(item)
}
})
},
append(child) {
this.dataList.forEach(item => {
if (child.parentId === item.id) {
if (!item.children) {
this.$set(item, 'children', [])
}
item.children.push(child)
}
})
}
}
}
</script>
<style lang="scss">
.mod-menu {
.menu-list__input,
.icon-list__input {
> .el-input__inner {
cursor: pointer;
}
}
&__icon-popover {
width: 458px;
overflow: hidden;
}
&__icon-inner {
width: 478px;
max-height: 258px;
overflow-x: hidden;
overflow-y: auto;
}
&__icon-list {
width: 458px;
padding: 0;
margin: -8px 0 0 -8px;
> .el-button {
padding: 8px;
margin: 8px 0 0 8px;
> span {
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
font-size: 18px;
}
}
}
}
</style>