123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293 |
- <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="角色描述 : " prop="intro">
- <el-input type="textarea" v-model="form.intro" placeholder="" resize="none" rows="4" ></el-input>
- </el-form-item>
- </el-form>-->
- <div class="chooseuser">
- <span style="color:#303133">选择用户:</span>
- <el-radio v-model="checked" label="1">从已有员工中选择</el-radio>
- <el-radio v-model="checked" label="2">新增员工</el-radio>
- </div>
- <div v-if="checked == '1'" class="roleContent">
- <div class="roleContentLeft">
- <p style="color:#303133">选择:</p>
- <div class="chooseBox">
- <div>
- <el-checkbox
- :indeterminate="isIndeterminate"
- v-model="checkAll"
- @change="handleCheckAllChange"
- >全选</el-checkbox>
- </div>
- <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
- <!-- <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> -->
- <div class="checkone" v-for="city in cities" :key="city">
- <el-checkbox :label="city">
- <img src="https://kuyi.shengws.com/S1.png" alt />
- <span>名字</span>
- </el-checkbox>
- </div>
- </el-checkbox-group>
- </div>
- </div>
- <div class="roleContentRight">
- <p style="color:#303133">已选:</p>
- <div class="chooseBox">
- <div class="hasChoosedOne">
- <img src="https://kuyi.shengws.com/S1.png" alt />
- <span>名字</span>
- </div>
- </div>
- </div>
- </div>
- <div v-if="checked == '2'" class="newStaff">
- <el-form
- :model="ruleForm"
- :rules="newrules"
- label-position="right"
- label-width="80px"
- style="width:40%"
- >
- <el-form-item label="姓名" prop="name">
- <el-input v-model="ruleForm.name"></el-input>
- </el-form-item>
- <el-form-item label="手机号" prop="phone">
- <el-input v-model="ruleForm.phone"></el-input>
- </el-form-item>
- <el-form-item label="职位">
- <el-input></el-input>
- </el-form-item>
- </el-form>
- <div class="newItem">
- <p style="width:80px;text-align:right;padding-right:8px">
- <i class="el-icon-circle-plus" style="font-size:20px;color:#338AFB"></i>
- </p>
- <p style="color:#409FFF">继续新增员工</p>
- </div>
- </div>
- <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: "EditRole",
- 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;
- this.$emit(
- "did-add-role",
- new_id,
- new_name,
- new_intro,
- new_status
- );
-
- 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>
|