Browse Source

常用功能菜单

dev
luyan 12 months ago
parent
commit
a81a89fe62
  1. 22
      src/views/modules/workPc/customer-add-or-update.vue
  2. 68
      src/views/modules/workPc/menu-add-or-update.vue
  3. 86
      src/views/modules/workPc/menu.vue
  4. 109
      src/views/modules/workPc/setpwd.vue

22
src/views/modules/workPc/customer-add-or-update.vue

@ -1,23 +1,15 @@
<template> <template>
<el-dialog :visible.sync="visible" <el-dialog :visible.sync="visible" :title="'选择客户'" :close-on-click-modal="false" :close-on-press-escape="false"
:title="'选择客户'"
:close-on-click-modal="false"
:close-on-press-escape="false"
:top="diaTop"> :top="diaTop">
<div class="customerDiv" <div class="customerDiv" :style="{ height: diaHeight + 'px' }">
:style="{height:diaHeight+'px'}">
<el-checkbox :indeterminate="isIndeterminate" <el-checkbox :indeterminate="isIndeterminate" v-model.trim="checkAll"
v-model.trim="checkAll"
@change="handleCheckAllChange">全选</el-checkbox> @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group v-model.trim="menuListShow" <el-checkbox-group v-model.trim="menuListShow" @change="handleCheckedCitiesChange">
@change="handleCheckedCitiesChange">
<el-checkbox v-for="(item,index) in customerList " <el-checkbox v-for="(item, index) in customerList " :key="index" class="customerItem"
:key="index"
class="customerItem"
:label="item.customerId">{{ item.customerName }}</el-checkbox> :label="item.customerId">{{ item.customerName }}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
@ -26,8 +18,7 @@
<template slot="footer"> <template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" <el-button type="primary" @click="saveMenuList()">{{ $t('confirm') }}</el-button>
@click="saveMenuList()">{{ $t('confirm') }}</el-button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
@ -192,6 +183,7 @@ export default {
margin-left: 100px; margin-left: 100px;
overflow-y: scroll; overflow-y: scroll;
} }
.customerItem { .customerItem {
display: block; display: block;
margin: 20px; margin: 20px;

68
src/views/modules/workPc/menu-add-or-update.vue

@ -1,6 +1,8 @@
<template> <template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false"> <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px"> :close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
label-width="120px">
<el-form-item prop="type" :label="$t('menu.type')" size="mini"> <el-form-item prop="type" :label="$t('menu.type')" size="mini">
<el-radio-group v-model.trim="dataForm.type" :disabled="!!dataForm.id"> <el-radio-group v-model.trim="dataForm.type" :disabled="!!dataForm.id">
<el-radio :label="0">{{ $t('menu.type0') }}</el-radio> <el-radio :label="0">{{ $t('menu.type0') }}</el-radio>
@ -11,20 +13,17 @@
<el-input v-model.trim="dataForm.name" :placeholder="$t('menu.name')"></el-input> <el-input v-model.trim="dataForm.name" :placeholder="$t('menu.name')"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="parentName" :label="$t('menu.parentName')" class="menu-list"> <el-form-item prop="parentName" :label="$t('menu.parentName')" class="menu-list">
<el-popover v-model.trim="menuListVisible" ref="menuListPopover" placement="bottom-start" trigger="click"> <el-popover v-model.trim="menuListVisible" ref="menuListPopover" placement="bottom-start"
<el-tree trigger="click">
:data="menuList" <el-tree :data="menuList" :props="{ label: 'name', children: 'children' }" node-key="id"
:props="{ label: 'name', children: 'children' }" ref="menuListTree" :highlight-current="true" :expand-on-click-node="false" accordion
node-key="id"
ref="menuListTree"
:highlight-current="true"
:expand-on-click-node="false"
accordion
@current-change="menuListTreeCurrentChangeHandle"> @current-change="menuListTreeCurrentChangeHandle">
</el-tree> </el-tree>
</el-popover> </el-popover>
<el-input v-model.trim="dataForm.parentName" v-popover:menuListPopover :readonly="true" :placeholder="$t('menu.parentName')"> <el-input v-model.trim="dataForm.parentName" v-popover:menuListPopover :readonly="true"
<i v-if="dataForm.pid !== '0'" slot="suffix" @click.stop="deptListTreeSetDefaultHandle()" class="el-icon-circle-close el-input__icon"></i> :placeholder="$t('menu.parentName')">
<i v-if="dataForm.pid !== '0'" slot="suffix" @click.stop="deptListTreeSetDefaultHandle()"
class="el-icon-circle-close el-input__icon"></i>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="dataForm.type === 0" prop="url" :label="$t('menu.url')"> <el-form-item v-if="dataForm.type === 0" prop="url" :label="$t('menu.url')">
@ -37,38 +36,39 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item prop="sort" :label="$t('menu.sort')"> <el-form-item prop="sort" :label="$t('menu.sort')">
<el-input-number v-model.trim="dataForm.sort" controls-position="right" :min="0" :label="$t('menu.sort')"></el-input-number> <el-input-number v-model.trim="dataForm.sort" controls-position="right" :min="0"
:label="$t('menu.sort')"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item v-if="dataForm.type === 0" prop="icon" :label="$t('menu.icon')" class="icon-list"> <el-form-item v-if="dataForm.type === 0" prop="icon" :label="$t('menu.icon')" class="icon-list">
<el-popover v-model.trim="iconListVisible" ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-sys__menu-icon-popover"> <el-popover v-model.trim="iconListVisible" ref="iconListPopover" placement="bottom-start"
trigger="click" popper-class="mod-sys__menu-icon-popover">
<div class="mod-sys__menu-icon-inner"> <div class="mod-sys__menu-icon-inner">
<div class="mod-sys__menu-icon-list"> <div class="mod-sys__menu-icon-list">
<el-button <el-button v-for="(item, index) in iconList" :key="index"
v-for="(item, index) in iconList"
:key="index"
@click="iconListCurrentChangeHandle(item)" @click="iconListCurrentChangeHandle(item)"
:class="{ 'is-active': dataForm.icon === item }"> :class="{ 'is-active': dataForm.icon === item }">
<svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${item}`"></use></svg> <svg class="icon-svg" aria-hidden="true">
<use :xlink:href="`#${item}`"></use>
</svg>
</el-button> </el-button>
</div> </div>
</div> </div>
</el-popover> </el-popover>
<el-input v-model.trim="dataForm.icon" v-popover:iconListPopover :readonly="true" :placeholder="$t('menu.icon')"></el-input> <el-input v-model.trim="dataForm.icon" v-popover:iconListPopover :readonly="true"
:placeholder="$t('menu.icon')"></el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="dataForm.type === 1" prop="permissions" :label="$t('menu.permissions')"> <el-form-item v-if="dataForm.type === 1" prop="permissions" :label="$t('menu.permissions')">
<el-input v-model.trim="dataForm.permissions" :placeholder="$t('menu.permissionsTips')"></el-input> <el-input v-model.trim="dataForm.permissions" :placeholder="$t('menu.permissionsTips')"></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item v-for="(item, index) in dataForm.resourceList" :key="item.key"
v-for="(item, index) in dataForm.resourceList"
:key="item.key"
:prop="`resourceList.${index}.resourceUrl`" :prop="`resourceList.${index}.resourceUrl`"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"
:label="index === 0 ? $t('menu.resource') : ''" :label="index === 0 ? $t('menu.resource') : ''" class="resource-list">
class="resource-list">
<el-row> <el-row>
<el-col :span="22"> <el-col :span="22">
<el-input v-model.trim="item.resourceUrl" :placeholder="$t('menu.resourceUrl')"> <el-input v-model.trim="item.resourceUrl" :placeholder="$t('menu.resourceUrl')">
<el-select v-model.trim="item.resourceMethod" slot="prepend" :placeholder="$t('menu.resourceMethod')"> <el-select v-model.trim="item.resourceMethod" slot="prepend"
:placeholder="$t('menu.resourceMethod')">
<el-option label="GET" value="GET"></el-option> <el-option label="GET" value="GET"></el-option>
<el-option label="POST" value="POST"></el-option> <el-option label="POST" value="POST"></el-option>
<el-option label="PUT" value="PUT"></el-option> <el-option label="PUT" value="PUT"></el-option>
@ -77,12 +77,15 @@
</el-input> </el-input>
</el-col> </el-col>
<el-col :span="2" class="text-center"> <el-col :span="2" class="text-center">
<el-button @click="resourceDeleteHandle(item)" size="small" type="text">{{ $t('delete') }}</el-button> <el-button @click="resourceDeleteHandle(item)" size="small" type="text">{{ $t('delete')
}}</el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
<el-form-item :label="dataForm.resourceList==null || dataForm.resourceList.length <= 0 ? $t('menu.resource') : ''"> <el-form-item
<el-button @click="resourceAddHandle()" class="aui-button--dashed w-percent-100">{{ $t('menu.resourceAddItem') }}</el-button> :label="dataForm.resourceList == null || dataForm.resourceList.length <= 0 ? $t('menu.resource') : ''">
<el-button @click="resourceAddHandle()" class="aui-button--dashed w-percent-100">{{
$t('menu.resourceAddItem') }}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template slot="footer"> <template slot="footer">
@ -235,30 +238,37 @@ export default {
text-align: center; text-align: center;
} }
} }
.menu-list, .menu-list,
.icon-list { .icon-list {
.el-input__inner, .el-input__inner,
.el-input__suffix { .el-input__suffix {
cursor: pointer; cursor: pointer;
} }
} }
&-icon-popover { &-icon-popover {
width: 458px; width: 458px;
overflow: hidden; overflow: hidden;
} }
&-icon-inner { &-icon-inner {
width: 478px; width: 478px;
max-height: 258px; max-height: 258px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
&-icon-list { &-icon-list {
width: 458px; width: 458px;
padding: 0; padding: 0;
margin: -8px 0 0 -8px; margin: -8px 0 0 -8px;
>.el-button { >.el-button {
padding: 8px; padding: 8px;
margin: 8px 0 0 8px; margin: 8px 0 0 8px;
>span { >span {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;

86
src/views/modules/workPc/menu.vue

@ -1,89 +1,49 @@
<template> <template>
<el-card shadow="never" <el-card shadow="never" class="aui-card--fill">
class="aui-card--fill">
<div class="mod-sys__menu"> <div class="mod-sys__menu">
<el-form :inline="true" <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
:model="dataForm"
@keyup.enter.native="getDataList()">
<el-form-item> <el-form-item>
<el-button type="primary" <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
@click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table v-loading="dataListLoading" <el-table v-loading="dataListLoading" :data="dataList" row-key="id" border :height="tableHeight"
:data="dataList"
row-key="id"
border
:height="tableHeight"
style="width: 100%;"> style="width: 100%;">
<el-table-column prop="name" <el-table-column prop="name" :label="$t('menu.name')" header-align="center"
:label="$t('menu.name')"
header-align="center"
min-width="150"></el-table-column> min-width="150"></el-table-column>
<el-table-column prop="icon" <el-table-column prop="icon" :label="$t('menu.icon')" header-align="center" align="center">
:label="$t('menu.icon')"
header-align="center"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<svg class="icon-svg" <svg class="icon-svg" aria-hidden="true">
aria-hidden="true">
<use :xlink:href="`#${scope.row.icon}`"></use> <use :xlink:href="`#${scope.row.icon}`"></use>
</svg> </svg>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="type" <el-table-column prop="type" :label="$t('menu.type')" header-align="center" align="center">
:label="$t('menu.type')"
header-align="center"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-if="scope.row.type === 0" <el-tag v-if="scope.row.type === 0" size="small">{{ $t('menu.type0') }}</el-tag>
size="small">{{ $t('menu.type0') }}</el-tag> <el-tag v-else size="small" type="info">{{ $t('menu.type1') }}</el-tag>
<el-tag v-else
size="small"
type="info">{{ $t('menu.type1') }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="sort" <el-table-column prop="sort" :label="$t('menu.sort')" header-align="center"
:label="$t('menu.sort')"
header-align="center"
align="center"></el-table-column> align="center"></el-table-column>
<el-table-column prop="url" <el-table-column prop="url" :label="$t('menu.url')" header-align="center" align="center" width="150"
:label="$t('menu.url')"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"></el-table-column> :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="permissions" <el-table-column prop="permissions" :label="$t('menu.permissions')" header-align="center" align="center"
:label="$t('menu.permissions')" width="150" :show-overflow-tooltip="true"></el-table-column>
header-align="center" <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
align="center"
width="150"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column :label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update')
size="small" }}</el-button>
@click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete')
<el-button type="text" }}</el-button>
size="small" <el-button type="text" size="small" @click="showCustomerMenu(scope.row.id)">{{ '客户配置'
@click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> }}</el-button>
<el-button type="text"
size="small"
@click="showCustomerMenu(scope.row.id)">{{ '客户配置' }}</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
ref="addOrUpdate"
@refreshDataList="getDataList"></add-or-update>
<!-- 客户菜单配置 --> <!-- 客户菜单配置 -->
<customer-add-or-update ref="customerForm" <customer-add-or-update ref="customerForm" @refreshDataList="getDataList"></customer-add-or-update>
@refreshDataList="getDataList"></customer-add-or-update>
</div> </div>
</el-card> </el-card>
</template> </template>

109
src/views/modules/workPc/setpwd.vue

@ -1,49 +1,25 @@
<template> <template>
<el-card shadow="never" class="aui-card--fill"> <el-card shadow="never" class="aui-card--fill">
<div class="mod-sys__menu"> <div class="mod-sys__menu">
<el-form <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item> <el-form-item>
<el-button type="primary" @click="addOrUpdateHandle()">{{ <el-button type="primary" @click="addOrUpdateHandle()">{{
$t('add') $t('add')
}}</el-button> }}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table <el-table v-loading="dataListLoading" :data="dataList" row-key="id" border :height="tableHeight"
v-loading="dataListLoading" style="width: 100%">
:data="dataList" <el-table-column prop="name" :label="$t('menu.name')" header-align="center"
row-key="id" min-width="150"></el-table-column>
border <el-table-column prop="icon" :label="$t('menu.icon')" header-align="center" align="center">
:height="tableHeight"
style="width: 100%"
>
<el-table-column
prop="name"
:label="$t('menu.name')"
header-align="center"
min-width="150"
></el-table-column>
<el-table-column
prop="icon"
:label="$t('menu.icon')"
header-align="center"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
<svg class="icon-svg" aria-hidden="true"> <svg class="icon-svg" aria-hidden="true">
<use :xlink:href="`#${scope.row.icon}`"></use> <use :xlink:href="`#${scope.row.icon}`"></use>
</svg> </svg>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="type" :label="$t('menu.type')" header-align="center" align="center">
prop="type"
:label="$t('menu.type')"
header-align="center"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-if="scope.row.type === 0" size="small">{{ <el-tag v-if="scope.row.type === 0" size="small">{{
$t('menu.type0') $t('menu.type0')
@ -53,68 +29,27 @@
}}</el-tag> }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="sort" :label="$t('menu.sort')" header-align="center"
prop="sort" align="center"></el-table-column>
:label="$t('menu.sort')" <el-table-column prop="url" :label="$t('menu.url')" header-align="center" align="center" width="150"
header-align="center" :show-overflow-tooltip="true"></el-table-column>
align="center" <el-table-column prop="permissions" :label="$t('menu.permissions')" header-align="center" align="center"
></el-table-column> width="150" :show-overflow-tooltip="true"></el-table-column>
<el-table-column <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
prop="url"
:label="$t('menu.url')"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="permissions"
:label="$t('menu.permissions')"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update')
type="text" }}</el-button>
size="small" <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete')
@click="addOrUpdateHandle(scope.row.id)" }}</el-button>
>{{ $t('update') }}</el-button <el-button type="text" size="small" @click="showCustomerMenu(scope.row.id)">{{ '客户配置'
> }}</el-button>
<el-button
type="text"
size="small"
@click="deleteHandle(scope.row.id)"
>{{ $t('delete') }}</el-button
>
<el-button
type="text"
size="small"
@click="showCustomerMenu(scope.row.id)"
>{{ '客户配置' }}</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<add-or-update <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
<!-- 客户菜单配置 --> <!-- 客户菜单配置 -->
<customer-add-or-update <customer-add-or-update ref="customerForm" @refreshDataList="getDataList"></customer-add-or-update>
ref="customerForm"
@refreshDataList="getDataList"
></customer-add-or-update>
</div> </div>
</el-card> </el-card>
</template> </template>

Loading…
Cancel
Save