Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
d85cf35a by xiaomiao
Options

运维中心菜单样式调整

1 parent 94ebb381
Expand all
Inline Side-by-side
Showing 13 changed files with 575 additions and 470 deletions
......@@ -360,7 +360,27 @@ aside {
border-radius: 16px;
color: #0097FF;
}
.configurationbtnColor {
width: 64px;
height: 28px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
color: #04c0a7;
}
.resetbtnColor {
width: 64px;
height: 28px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
color: #04c0a7;
}
.movebtnColor {
width: 64px;
height: 28px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
color: #0097FF;
}
.successColor:hover {
width: 64px;
height: 28px;
......@@ -472,4 +492,4 @@ aside {
@font-face {
font-family: AliBold;
src: url('../image/font/Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf')
}
\ No newline at end of file
}
......
......@@ -444,4 +444,4 @@
}
}
}
}
\ No newline at end of file
}
......
......@@ -40,7 +40,6 @@
mounted () {
this.getdjywltotal();
window.addEventListener("resize", () => {
this.cdata.seriesData = [];
this.getdjywltotal();
});
// scroll(tableref.value.$refs.bodyWrapper);//设置滚动
......
......@@ -35,7 +35,7 @@
</el-form-item>
</el-form>
<div class="bottom-wrapper">
<el-button type="primary" @click="updateInfo">更新信息</el-button>
<btn nativeType="cx" type="primary" @click="updateInfo">更新信息</btn>
</div>
</div>
</div>
......
<!--
* @Author: xiaomiao 1158771342@qq.com
* @Date: 2023-03-08 15:30:43
* @LastEditors: yangwei
* @LastEditTime: 2023-03-13 17:19:46
* @FilePath: \bdcjg-web\src\views\system\information\index.vue
* @Date: 2023-03-09 20:54:28
* @LastEditors: xiaomiao 1158771342@qq.com
* @LastEditTime: 2023-03-15 15:45:01
* @FilePath: \上报\bdcjg-web\src\views\system\information\index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
......@@ -14,19 +14,13 @@
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
<el-col :span="3" class="btnColRight">
<!-- <btn nativeType="cx" @click="information"
>基本信息</btn
>
<btn nativeType="cx" :class="isshow ? '' : ''" @click="password"
>修改密码</btn
> -->
<button @click="information" :class="isshow ? 'button choosed' : 'button'">
<el-col :span="4" class="btnColRight">
<btn nativeType="cx" type="primary" @click="information">
基本信息
</button>
<button @click="password" :class="isshow ? 'button' : 'button choosed'">
</btn>
<btn nativeType="cz" @click="password">
修改密码
</button>
</btn>
</el-col>
</el-row>
</el-form>
......@@ -40,69 +34,68 @@
</div>
</template>
<script>
import "@/utils/flexible.js";
import BaseSet from "./base-set.vue";
import PasswordEdit from "./password-edit.vue";
export default {
components: {
BaseSet,
PasswordEdit,
},
data() {
return {
isshow: true,
};
},
computed: {
userData() {
return this.$store.state.user.userInfo;
import "@/utils/flexible.js";
import BaseSet from "./base-set.vue";
import PasswordEdit from "./password-edit.vue";
export default {
components: {
BaseSet,
PasswordEdit,
},
},
watch: {},
created() {},
mounted() {},
methods: {
information() {
this.isshow = true;
data () {
return {
isshow: true,
};
},
password() {
this.isshow = false;
computed: {
userData () {
return this.$store.state.user.userInfo;
},
},
},
};
watch: {},
created () { },
mounted () { },
methods: {
information () {
this.isshow = true;
},
password () {
this.isshow = false;
},
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/public.scss";
.information {
display: flex;
flex-direction: column;
.btnColRight {
.button {
width: 76px;
height: 32px;
color: #ffffff;
margin: 0 5px;
cursor: pointer;
border: 0;
background: url('../../../image/btn.png') no-repeat 0 0;
background-size: cover;
}
.choosed{
background: url('../../../image/btn.png') no-repeat 0 -34px;
@import "~@/styles/mixin.scss";
@import "~@/styles/public.scss";
.information {
display: flex;
flex-direction: column;
.btnColRight {
// background-color: cadetblue;
height: 60px;
.button:nth-child(1) {
position: absolute;
left: 30px;
top: 20px;
}
.button:nth-child(2) {
position: absolute;
top: 20px;
left: 120px;
}
}
}
/deep/.content {
.el-input__inner {
background: none;
/deep/.content {
.el-input__inner {
background: none;
}
.user-info {
background: none;
}
}
.user-info {
background: none;
.boxin {
flex: 1;
}
}
.boxin {
flex: 1;
}
}
</style>
......
......@@ -6,135 +6,131 @@
label-width="100px"
:model="form"
class="form-wrapper"
:rules="rules"
>
:rules="rules">
<el-form-item label="旧密码:" prop="oldPassword">
<el-input
v-model="form.oldPassword"
clearable
type="password"
show-password
/>
show-password />
</el-form-item>
<el-form-item label="新密码:" prop="newPassword">
<el-input
v-model="form.newPassword"
clearable
type="password"
show-password
/>
show-password />
</el-form-item>
<el-form-item label="确认密码:" prop="confirmPassword">
<el-input
v-model="form.confirmPassword"
clearable
type="password"
show-password
/>
show-password />
</el-form-item>
</el-form>
<div class="bottom-wrapper">
<el-button type="primary" @click="updatePassword">确认修改</el-button>
<btn nativeType="cx" type="primary" @click="updatePassword">确认修改</btn>
</div>
</div>
</div>
</template>
<script>
import { updateUserPassword } from "@/api/personnelManage";
export default {
props: {
userInfo: {
type: Object,
default: null,
},
},
data() {
return {
form: {},
sexList: [],
userId: "",
rules: {
oldPassword: [
{ required: true, message: "旧密码不能为空", trigger: "blur" },
],
newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
],
confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
{ validator: this.validatorConfirmPassword, trigger: "blur" },
],
},
};
},
computed: {},
watch: {
userInfo: {
handler: function (val) {
if (val) {
this.getid(val);
}
import { updateUserPassword } from "@/api/personnelManage";
export default {
props: {
userInfo: {
type: Object,
default: null,
},
},
},
mounted() {
if (this.userInfo) {
this.getid(this.userInfo);
}
},
methods: {
getid(val) {
this.userId = val.id;
data () {
return {
form: {},
sexList: [],
userId: "",
rules: {
oldPassword: [
{ required: true, message: "旧密码不能为空", trigger: "blur" },
],
newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
],
confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
{ validator: this.validatorConfirmPassword, trigger: "blur" },
],
},
};
},
validatorConfirmPassword(rule, value, callback) {
const { newPassword } = this.form;
if (value !== newPassword) {
callback("两次输入密码不一致");
} else {
callback();
computed: {},
watch: {
userInfo: {
handler: function (val) {
if (val) {
this.getid(val);
}
},
},
},
mounted () {
if (this.userInfo) {
this.getid(this.userInfo);
}
},
updatePassword() {
this.$refs.form.validate((valid) => {
if (valid) {
const params = Object.assign({}, this.form, { id: this.userId });
updateUserPassword(params).then((res) => {
if (res.status === 1) {
this.$message.success({ message: res.message, showClose: true });
} else {
this.$message.error({ message: res.message, showClose: true });
}
});
methods: {
getid (val) {
this.userId = val.id;
},
validatorConfirmPassword (rule, value, callback) {
const { newPassword } = this.form;
if (value !== newPassword) {
callback("两次输入密码不一致");
} else {
callback();
}
});
},
updatePassword () {
this.$refs.form.validate((valid) => {
if (valid) {
const params = Object.assign({}, this.form, { id: this.userId });
updateUserPassword(params).then((res) => {
if (res.status === 1) {
this.$message.success({ message: res.message, showClose: true });
} else {
this.$message.error({ message: res.message, showClose: true });
}
});
}
});
},
},
},
};
};
</script>
<style scoped lang="scss">
.user-info {
margin: 36px 200px;
overflow-y: auto;
.form-wrapper {
padding: 24px 120px 0px;
/deep/.el-form-item {
margin-bottom: 24px;
.el-form-item__label {
color: #ffffff;
}
.el-input .el-input__inner {
padding: 0 8px;
height: 40px;
line-height: 40px;
border: 1px solid #6bc1fc;
.user-info {
margin: 36px 200px;
overflow-y: auto;
.form-wrapper {
padding: 24px 120px 0px;
/deep/.el-form-item {
margin-bottom: 24px;
.el-form-item__label {
color: #ffffff;
}
.el-input .el-input__inner {
padding: 0 8px;
height: 40px;
line-height: 40px;
border: 1px solid #6bc1fc;
}
}
}
.bottom-wrapper {
padding: 32px 120px 24px;
text-align: center;
}
}
.bottom-wrapper {
padding: 32px 120px 24px;
text-align: center;
}
}
</style>
......
<template>
<dialogBox class="modifydialog" :isMain="true" :title="2222" @closeDialog="close" @submitForm="submitForm"
<dialogBox class="modifydialog" :isMain="true" width="40%" :title="title" @closeDialog="close" @submitForm="submitForm"
v-model="myValue">
<div class="modifydialog-con">
<el-form ref="form" :model="form" :rules="rules">
......@@ -19,15 +19,15 @@
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-row :gutter="23">
<el-col :span="23">
<el-form-item label="代码:" prop="code" label-width="124px">
<el-input v-model="codeComputed" placeholder="请输入菜单代码" :disabled="type === 1" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-row :gutter="23">
<el-col :span="23">
<el-form-item label="链接路径:" label-width="124px">
<el-input v-model="form.uri" placeholder="请输入链接路径" />
</el-form-item>
......@@ -56,177 +56,197 @@
</template>
<script>
import { getParentMenuListAction } from '@/api/authorityManage'
import JsonEditor from '@/components/JsonEditors'
import { validateCode } from '@/utils/validate';
import { api, httpAction } from '@/api/manageApi'
export default {
name: 'MenuModal',
components: {
JsonEditor,
},
props: {
value: { type: Boolean, default: false },
productId: {
type: String,
default: ''
}
},
data () {
return {
myValue: this.value,
form: {
icon: '',
code: ''
},
rules: {
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
code: [
{ required: true, message: '必填', trigger: 'blur' },
{ validator: validateCode, trigger: 'blur' }
]
},
title: '',
type: '',
visible: false,
parentMenuList: [],
menuKey: 0,
jumpModeList: [
{ name: '在当前页面显示', value: 1 },
{ name: '跳转到新页面', value: 2 }
],
setProps: {
value: 'id',
label: 'name',
children: 'children',
expandTrigger: 'hover',
checkStrictly: true, // 可取消关联，选择任意一级选项
emitPath: false
},
dataUrl: api.menus
}
},
computed: {
codeComputed: {
get: function () {
return this.form.code
},
set: function (val) {
this.form.code = val.toUpperCase()
}
}
},
watch: {
value (val) {
this.myValue = val
}
},
methods: {
// 获取父级菜单
getParentMenuList (id) {
getParentMenuListAction(id).then((res) => {
if (res.status === 1) {
const list = this.$dealArrChildren(res.content)
if (id) {
this.parentMenuList = this.$dealArrDisabled(
this.$deepCopy(list),
id
)
this.menuKey++
} else {
this.parentMenuList = list
}
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
import { getParentMenuListAction } from '@/api/authorityManage'
import JsonEditor from '@/components/JsonEditors'
import { validateCode } from '@/utils/validate';
import { api, httpAction } from '@/api/manageApi'
export default {
name: 'MenuModal',
components: {
JsonEditor,
},
getIconList () {
this.$refs.iconList.show(true)
},
getIconName (data) {
this.form.icon = data
},
// 配置参数
getJsonString (data) {
this.form.metadata = data
props: {
value: { type: Boolean, default: false },
productId: {
type: String,
default: ''
}
},
// 新增菜单
add () {
this.getParentMenuList(this.productId)
this.type = 0
this.form.jumpMode = 1
data () {
return {
myValue: this.value,
form: {
icon: '',
code: ''
},
rules: {
name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
code: [
{ required: true, message: '必填', trigger: 'blur' },
{ validator: validateCode, trigger: 'blur' }
]
},
title: '',
type: '',
visible: false,
parentMenuList: [],
menuKey: 0,
jumpModeList: [
{ name: '在当前页面显示', value: 1 },
{ name: '跳转到新页面', value: 2 }
],
setProps: {
value: 'id',
label: 'name',
children: 'children',
expandTrigger: 'hover',
checkStrictly: true, // 可取消关联，选择任意一级选项
emitPath: false
},
dataUrl: api.menus
}
},
// 编辑菜单
edit (record) {
this.type = 1
// 若有id为编辑
if (record.id) {
this.$nextTick(() => {
this.form = Object.assign({}, record)
this.getParentMenuList(this.productId)
})
computed: {
codeComputed: {
get: function () {
return this.form.code
},
set: function (val) {
this.form.code = val.toUpperCase()
}
}
},
// 选择上级菜单
handleChange (value) {
this.form.parentId = value
watch: {
value (val) {
this.myValue = val
}
},
// 保存
submitForm (submitType) {
this.$refs.form.validate((valid) => {
if (valid) {
let method = ''
let url = ''
const formData = this.form
formData.productId = this.productId
if (!formData.id) {
method = 'post'
url = this.dataUrl
methods: {
// 获取父级菜单
getParentMenuList (id) {
getParentMenuListAction(id).then((res) => {
if (res.status === 1) {
const list = this.$dealArrChildren(res.content)
if (id) {
this.parentMenuList = this.$dealArrDisabled(
this.$deepCopy(list),
id
)
this.menuKey++
} else {
this.parentMenuList = list
}
} else {
method = 'put'
url = `${this.dataUrl}/${formData.id}`
this.$message.error({ message: res.message, showClose: true })
}
debugger
httpAction(url, formData, method)
.then((res) => {
if (res.status === 1) {
this.$message.success({
message: res.message,
showClose: true
})
})
},
getIconList () {
this.$refs.iconList.show(true)
},
getIconName (data) {
this.form.icon = data
},
// 配置参数
getJsonString (data) {
this.form.metadata = data
},
// 新增菜单
add () {
this.getParentMenuList(this.productId)
this.type = 0
this.form.jumpMode = 1
},
// 编辑菜单
edit (record) {
this.type = 1
// 若有id为编辑
if (record.id) {
this.$nextTick(() => {
this.form = Object.assign({}, record)
this.getParentMenuList(this.productId)
})
}
},
// 选择上级菜单
handleChange (value) {
this.form.parentId = value
},
// 保存
submitForm (submitType) {
this.$refs.form.validate((valid) => {
if (valid) {
let method = ''
let url = ''
const formData = this.form
formData.productId = this.productId
if (!formData.id) {
method = 'post'
url = this.dataUrl
} else {
method = 'put'
url = `${this.dataUrl}/${formData.id}`
}
debugger
httpAction(url, formData, method)
.then((res) => {
if (res.status === 1) {
this.$message.success({
message: res.message,
showClose: true
})
this.resetForm()
this.$emit('ok')
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
.catch((err) => {
console.log(err)
})
this.resetForm()
this.$emit('ok')
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
.catch((err) => {
console.log(err)
})
}
})
},
resetForm () {
this.$refs.form.resetFields()
this.form = {
icon: '',
code: ''
}
})
},
resetForm () {
this.$refs.form.resetFields()
this.form = {
icon: '',
code: ''
},
close () {
this.resetForm()
this.$emit('input', false)
}
},
close () {
this.resetForm()
this.$emit('input', false)
}
}
}
</script>
<style scoped lang="scss">
.modifydialog {
&-con {
background: #031A46;
.modifydialog {
&-con {
background: #031a46;
}
/deep/.el-dialog__header {
.dialog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
top: -8px;
width: 28%;
height: 40px;
margin-left: 28px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
b {
font-size: 16px;
font-weight: 600;
}
}
}
}
}
</style>
\ No newline at end of file
</style>
......
<!-- 新增 & 修改角色 -->
<template>
<Dialog
<dialogBox
class="modifydialog"
:title="dialogTitle"
:show.sync="showAddEditDialog"
:width="'767px'"
@close="handleCloseDialog()">
<template slot="content">
:title="title"
:width="'567px'"
:isMain="true"
@closeDialog="close"
@submitForm="submitForm"
v-model="myValue">
<div class="dialogCon">
<el-form ref="form" :model="dialogForm" :rules="rules" label-width="82px">
<el-row :gutter="24">
<el-col :span="15">
<el-col :span="23">
<el-form-item label="角色名称:" prop="roleName">
<el-input
v-model="dialogForm.roleName"
......@@ -19,18 +21,20 @@
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-col :span="23">
<el-form-item label="备注:" class="form-item-mb0">
<el-input
v-model="dialogForm.roleTextArea"
clearable
:rows="10"
type="textarea"
placeholder="备注" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<template slot="footer">
</div>
<!-- <template slot="footer">
<el-button
class="cancel-button"
@click="handleCloseDialog">取消</el-button>
......@@ -38,8 +42,8 @@
<el-button
type="primary"
@click="handleSaveRole()">保存</el-button>
</template>
</Dialog>
</template> -->
</dialogBox>
</template>
<script>
......@@ -49,9 +53,13 @@
components: {
Dialog
},
props: {
value: { type: Boolean, default: false },
},
data () {
return {
dialogTitle: '',
myValue: this.value,
title: '',
showAddEditDialog: false,
menuType: '',
roleId: '',
......@@ -72,9 +80,14 @@
]
}
},
watch: {
value (val) {
this.myValue = val
}
},
methods: {
// 保存新增或关闭事件
handleSaveRole (val) {
submitForm () {
this.$refs.form.validate((valid) => {
if (valid) {
try {
......@@ -97,8 +110,8 @@
this.dialogForm = {
roleName: '',
}
this.showAddEditDialog = val
this.$emit('ok', this.menuType)
// this.showAddEditDialog = val
this.$emit('ok')
} else {
this.$message.error({
message: res.message,
......@@ -114,10 +127,10 @@
message: '新增成功',
showClose: true
})
this.dialogForm = {
roleName: '',
}
this.showAddEditDialog = val
this.close()
this.$emit('ok')
// this.showAddEditDialog = val
this.$emit('ok', this.menuType)
} else {
this.$message.error({
......@@ -133,16 +146,40 @@
}
})
},
// 取消事件
handleCloseDialog () {
this.$refs.form.resetFields()
resetForm () {
this.dialogForm = {
roleName: '',
}
this.showAddEditDialog = false
this.$refs.form.resetFields()
},
close () {
this.resetForm()
this.$emit('input', false)
}
}
}
</script>
<style scoped lang="scss">
.modifydialog {
/deep/.el-dialog__header {
.dialog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
top: -8px;
width: 24%;
height: 40px;
margin-left: 28px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
b {
font-size: 16px;
font-weight: 600;
}
}
}
}
</style>
......
......@@ -17,7 +17,7 @@
:column="tableData.columns" :data="listdata" :expand-row-keys="keyList" row-key="dictid">
</lb-table>
</div>
<EditDialog ref="addEditDialog" @ok="reloadTableData" />
<EditDialog ref="addEditDialog" v-model="isDialog" @ok="reloadTableData" />
<Roleslistdiglog ref="rolesForm" />
</div>
</template>
......@@ -38,7 +38,7 @@
import EditDialog from "./edit-dialog.vue";
import Roleslistdiglog from "./roleslistdiglog.vue";
import { mapGetters } from "vuex";
import {updateOrder} from "@/api/orders"
import { updateOrder } from "@/api/orders"
export default {
name: "menus",
mixins: [tableMixin],
......@@ -48,6 +48,7 @@
},
data () {
return {
isDialog: false,
personlist: null,
waitMemberList: [],
keyList: [],
......@@ -108,42 +109,46 @@
.concat([
{
label: "排序",
width: 200,
width: 300,
render: (h, scope) => {
return (
<div>
<el-button
type="text"
class='movebtnColor'
disabled={scope.row.isTop}
onClick={() => {
this.updateOrder(scope.row,'TOP');
this.updateOrder(scope.row, 'TOP');
}}
>
置顶
</el-button>
<el-button
type="text"
class='movebtnColor'
disabled={scope.row.isTop}
onClick={() => {
this.updateOrder(scope.row,'UP');
this.updateOrder(scope.row, 'UP');
}}
>
上移
</el-button>
<el-button
type="text"
class='movebtnColor'
disabled={scope.row.isBottom}
onClick={() => {
this.updateOrder(scope.row,'DOWN');
this.updateOrder(scope.row, 'DOWN');
}}
>
下移
</el-button>
<el-button
type="text"
class='movebtnColor'
disabled={scope.row.isBottom}
onClick={() => {
this.updateOrder(scope.row,'BOTTOM');
this.updateOrder(scope.row, 'BOTTOM');
}}
>
置底
......@@ -172,6 +177,7 @@
disabled={scope.row.type === "Everyone"}
type="text"
size="mini"
class="configurationbtnColor"
icon="el-icon-video-pause"
onClick={() => {
this.getUserList(scope.row);
......@@ -193,6 +199,7 @@
disabled={scope.row.category === 1}
type="text"
size="mini"
class='successColor'
icon="el-icon-edit"
onClick={() => {
this.handleAddEdit(scope.row);
......@@ -214,6 +221,7 @@
type="text"
disabled={scope.row.category === 1}
size="mini"
class='delColor'
icon="el-icon-delete"
// style="color:#F56C6C"
onClick={() => {
......@@ -244,7 +252,7 @@
methods: {
// 获取角色列表
getTableData () {
getRolesById([1,2])
getRolesById([1, 2])
.then((res) => {
this.listdata = res.content;
this.listdata = judgeSort(this.listdata);
......@@ -394,6 +402,7 @@
},
// 新增、修改角色
handleAddEdit (value) {
this.isDialog = true
this.$refs.addEditDialog.menuType = this.menuType;
this.$refs.addEditDialog.roleId = value.id;
this.roleSort = value.sort ? value.sort : 0;
......@@ -404,10 +413,10 @@
this.$refs.addEditDialog.dialogForm.roleTextArea = value.description;
}
this.$refs.addEditDialog.showAddEditDialog = true;
this.$refs.addEditDialog.dialogTitle = value.id ? "修改" : "新增";
this.$refs.addEditDialog.title = value.id ? "修改" : "新增";
},
//排序
updateOrder(record, operate){
updateOrder (record, operate) {
const findIndex = this.listdata.findIndex(item => item.id === record.id)
let swapId = ''
if (operate === 'UP') {
......@@ -476,7 +485,17 @@
// @import "~@/styles/public.scss";
.btnColRight {
margin-left: -30px;
margin-top: 20px;
height: 60px;
.button {
position: absolute;
left: 30px;
top: 20px;
}
}
/deep/.el-button.is-disabled.el-button--text {
width: 64px;
height: 28px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
</style>
......
......@@ -37,8 +37,8 @@
</lb-table>
</div>
<template slot="footer">
<el-button type="primary" class="save" @click="handleSaveMember()">保存</el-button>
<el-button class="cancel-button" @click="close()">取消</el-button>
<btn nativeType="cx" type="primary" @click="handleSaveMember()">保存</btn>
<btn nativeType="cz" @click="close()">取消</btn>
</template>
</el-dialog>
</template>
......
<template>
<dialogBox :title="title" class="modifydialog" @closeDialog="close" :isMain="true" @submitForm="submitForm"
<dialogBox :title="title" :width="'867px'" class="modifydialog" @closeDialog="close" :isMain="true" @submitForm="submitForm"
v-model="myValue">
<div class="dialogCon">
<el-form ref="form" :model="form" :rules="rules">
<el-row :gutter="24">
<el-col :span="11">
<el-col :span="12">
<el-form-item label="姓名:" prop="name" label-width="100px">
<el-input v-model="form.name" placeholder="姓名" />
</el-form-item>
</el-col>
<el-col :span="13">
<el-col :span="23">
<el-col :span="18" class="col-pd0">
<el-form-item label="性别:" label-width="72px">
<el-form-item label="性别:" label-width="88px">
<el-radio v-for="(item, index) in sexList" :key="index" v-model="form.sex" :label="item.value">{{
item.name }}</el-radio>
</el-form-item>
......@@ -22,38 +22,38 @@
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="11">
<el-col :span="12">
<el-form-item label="工号:" prop="code" label-width="100px">
<el-input v-model="form.code" placeholder="工号" />
</el-form-item>
</el-col>
<el-col :span="13">
<el-col :span="12">
<el-form-item label="用户名:" prop="loginName" label-width="72px">
<el-input v-model="form.loginName" :disabled="showLoginName" placeholder="用户名" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="11">
<el-col :span="12">
<el-form-item label="身份证号码:" label-width="100px">
<el-input v-model="form.idCard" placeholder="身份证号码" />
</el-form-item>
</el-col>
<el-col :span="13">
<el-col :span="12">
<el-form-item label="手机号码:" prop="mobilePhone" label-width="72px">
<el-input v-model="form.mobilePhone" placeholder="手机号码" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="11">
<el-col :span="12">
<el-form-item label="最高职务级别:" label-width="100px">
<el-select v-model="form.jobLevel" placeholder="最高职务级别">
<el-option v-for="item in levelList" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="13">
<el-col :span="12">
<el-form-item label="办公电话:" prop="telephone" label-width="72px">
<el-input v-model="form.telephone" placeholder="办公电话" />
</el-form-item>
......@@ -72,107 +72,128 @@
</template>
<script>
import { api, httpAction } from '@/api/manageApi'
export default {
name: "",
props: {
value: { type: Boolean, default: false },
},
data () {
return {
myValue: this.value,
form: {
sex: "0",
},
rules: {
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
code: [{ required: true, message: "请输入工号", trigger: "blur" }],
mobilePhone: [{ validator: "sddd", trigger: "blur" }],
loginName: [
{ required: true, message: "请输入用户名", trigger: "blur" },
],
},
title: "修改",
showLoginName: false,
sexList: [{ lable: "0", value: "0", name: "男" }, { lable: "1", value: "1", name: "女" }],
levelList: [{ lable: "0", value: "0", name: "干事" }, { lable: "1", value: "1", name: "经理" }],
dataUrl: api.users
};
},
computed: {
departmentid () {
return this.$store.state.user.userInfo;
import { api, httpAction } from '@/api/manageApi'
export default {
name: "",
props: {
value: { type: Boolean, default: false },
},
},
watch: {
value (val) {
this.myValue = val
}
},
methods: {
// 添加人员
adds () {
this.showLoginName = false
data () {
return {
myValue: this.value,
form: {
sex: "0",
},
rules: {
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
code: [{ required: true, message: "请输入工号", trigger: "blur" }],
mobilePhone: [{ validator: "sddd", trigger: "blur" }],
loginName: [
{ required: true, message: "请输入用户名", trigger: "blur" },
],
},
title: "",
showLoginName: false,
sexList: [{ lable: "0", value: "0", name: "男" }, { lable: "1", value: "1", name: "女" }],
levelList: [{ lable: "0", value: "0", name: "干事" }, { lable: "1", value: "1", name: "经理" }],
dataUrl: api.users
};
},
// 编辑
edit (record) {
this.showLoginName = true
// 若有id为编辑
if (record) {
this.$nextTick(() => {
this.form = Object.assign({}, record)
})
}
computed: {
departmentid () {
return this.$store.state.user.userInfo;
},
},
handleChange (value) {
this.form.departmentId = value;
watch: {
value (val) {
this.myValue = val
}
},
// 保存
submitForm (submitType) {
this.$refs.form.validate((valid) => {
if (valid) {
let method = ''
let url = ''
this.form.organizationId = this.departmentid.organizationId;
this.form.departmentId = this.departmentid.departmentId;
const formData = this.form
if (!formData.id) {
method = 'post'
url = this.dataUrl
} else {
method = 'put'
url = `${this.dataUrl}/${formData.id}`
}
httpAction(url, formData, method).then((res) => {
if (res.status === 1) {
this.$message.success({ message: res.message, showClose: true })
methods: {
// 添加人员
adds () {
this.showLoginName = false
},
// 编辑
edit (record) {
this.showLoginName = true
// 若有id为编辑
if (record) {
this.$nextTick(() => {
this.form = Object.assign({}, record)
})
}
},
handleChange (value) {
this.form.departmentId = value;
},
// 保存
submitForm () {
this.$refs.form.validate((valid) => {
if (valid) {
let method = ''
let url = ''
this.form.organizationId = this.departmentid.organizationId;
this.form.departmentId = this.departmentid.departmentId;
const formData = this.form
if (!formData.id) {
method = 'post'
url = this.dataUrl
} else {
method = 'put'
url = `${this.dataUrl}/${formData.id}`
}
this.resetForm()
httpAction(url, formData, method).then((res) => {
if (res.status === 1) {
this.$message.success({ message: res.message, showClose: true })
this.close()
this.close()
this.$emit('ok')
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
} else {
return false
this.$emit('ok')
} else {
this.$message.error({ message: res.message, showClose: true })
}
})
} else {
return false
}
})
},
resetForm () {
this.form = {
sex: '0'
}
})
},
resetForm () {
this.form = {
sex: '0'
this.$refs.form.resetFields()
},
close () {
this.resetForm()
this.$emit('input', false)
}
this.$refs.form.resetFields()
},
close () {
this.resetForm()
this.$emit('input', false)
}
}
}
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.modifydialog {
/deep/.el-dialog__header {
.dialog_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
top: -7px;
width: 29%;
height: 40px;
margin-left: 28px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
white-space: nowrap;
b {
font-size: 16px;
font-weight: 600;
}
}
}
}
</style>
......