123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253 |
- <template>
- <el-dialog
- title="新增用户"
- width="660px"
- :visible.sync="visible"
- :before-close="_close"
- >
- <el-form :model="form" :rules="rules" ref="form" label-width="90px">
- <el-form-item label="角色名称 : " prop="name">
- <el-input v-model="form.name" placeholder="" maxlength="30"></el-input>
- </el-form-item>
- <el-form-item label="角色描述 : " >
- <el-input type="textarea" v-model="form.intro" placeholder="" resize="none" rows="4"></el-input>
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="hide">取 消</el-button>
- <el-button type="primary" @click="submitAction()">保 存</el-button>
- </div>
- </el-dialog>
- </template>
-
- <script>
- import { addRole, modifyRole } from '@/api/role/role'
-
- export default {
- name: 'AddRole',
- data() {
- return {
- form: {
- id: 0,
- name: '',
- intro: ''
- },
- visible: false,
- rules: {
- name: [
- { required: true, message: '请输入角色名称', trigger: 'blur' },
- { max: 10, message: '10个字以内', trigger: 'blur' }
- ],
- // intro: [{ required: true, message: '请输入角色说明', trigger: 'blur' }]
- },
-
- //
- checked: '1',
- checkAll: false,
- checkedCities: [],
- cities: ['上海', '北京', '广州', '深圳'],
- isIndeterminate: true,
- ruleForm: {
- name: '',
- phone: '',
- position: ''
- },
- newrules: {
- name: [
- { required: true, message: '请输入角色名称', trigger: 'blur' },
- { max: 10, message: '10个字以内', trigger: 'blur' }
- ],
- phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
- }
- }
- },
- methods: {
- _close: function(done) {
- this.clear()
- done()
- },
- clear: function() {
- this.form.id = 0
- this.form.name = ''
- this.form.intro = ''
- },
- show() {
- this.clear()
- this.visible = true
- },
- hide() {
- this.clear()
- this.visible = false
- },
- modify(id, name, intro) {
- this.form.id = id
- this.form.name = name
- this.form.intro = intro
- this.visible = true
- },
- submitAction() {
- this.$refs.form.validate(valid => {
- if (valid) {
- // 验证通过
- if (this.form.id === 0) {
- // 新增 role
- addRole(this.form.name, this.form.intro)
- .then(rs => {
- var resp = rs.data
- if (resp.state === 1) {
- var new_id = resp.data.id
- var new_name = resp.data.name
- var new_intro = resp.data.intro
- var new_status = resp.data.status
- var staff_number = 0
- this.$emit(
- 'did-add-role',
- new_id,
- new_name,
- new_intro,
- new_status,
- staff_number
- )
-
- this.hide()
- } else {
- this.$message.error(resp.msg)
- }
- })
- .catch(err => {
- this.$message.error(err)
- })
- } else {
- // 修改 role
- modifyRole(this.form.id, this.form.name, this.form.intro)
- .then(rs => {
- var resp = rs.data
- if (resp.state === 1) {
- this.$emit(
- 'did-edit-role',
- this.form.id,
- this.form.name,
- this.form.intro
- )
- this.hide()
- } else {
- this.$message.error(resp.msg)
- }
- })
- .catch(err => {
- this.$message.error(err)
- })
- }
- } else {
- // 验证失败
- return false
- }
- })
- },
- handleCheckAllChange(val) {
- this.checkedCities = val ? this.cities : []
- this.isIndeterminate = false
- },
- handleCheckedCitiesChange(value) {
- let checkedCount = value.length
- this.checkAll = checkedCount === this.cities.length
- this.isIndeterminate =
- checkedCount > 0 && checkedCount < this.cities.length
- }
- }
- }
- </script>
-
- <style lang="scss" scoped>
- .roleContent {
- margin-top: 20px;
- display: flex;
- justify-content: space-between;
-
- .roleContentLeft {
-
- .chooseBox {
- width: 280px;
- height: 320px;
- overflow-y: auto;
- border: 1px solid rgba(235, 238, 240, 1);
- margin-top: 26px;
- padding: 20px;
-
- .checkone {
- display: flex;
- align-items: center;
- height: 50px;
- }
-
- .el-checkbox__label {
- display: flex;
- align-items: center;
-
- img {
- width: 30px;
- height: 30px;
- margin-right: 10px;
- }
-
- }
- }
- }
- .roleContentRight {
-
- .chooseBox {
- width: 280px;
- height: 320px;
- overflow-y: auto;
- border: 1px solid rgba(235, 238, 240, 1);
- margin-top: 26px;
- padding: 20px;
-
- .hasChoosedOne {
- display: flex;
- align-items: center;
- height: 50px;
-
- img {
- width: 30px;
- height: 30px;
- margin-right: 10px;
- }
-
- }
- }
- }
- }
- .newStaff {
- margin-top: 26px;
-
- .newItem {
- display: flex;
- align-items: center;
- }
-
- }
- </style>
-
- <style lang="scss">
- .roleContent {
-
- .roleContentLeft {
-
- .chooseBox {
-
- .el-checkbox {
- display: flex;
- align-items: center;
- }
-
- .el-checkbox__label {
- display: flex;
- align-items: center;
- }
-
- }
- }
- }
- </style>
|