yos_web/src/HManagement/siteManage/systemRemind/components/edit.vue

<template>
  <div>
    <el-button size="mini" type="text" @click="editBtn">编 辑</el-button>
    <el-dialog append-to-body :visible.sync="dialogFormVisible" width="600">
      <div slot="title" style="font-size: 15px">
        编辑系统提示
      </div>
      <el-row :gutter="20">
        <el-form :model="form" :rules="rules" ref="form" label-width="90px" label-position="right" size="mini">
          <el-col :span="12">
            <el-form-item label="提醒名称" prop="remindname">
              <el-input disabled v-model="form.remindname" placeholder="提醒名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提醒标题" prop="remindtitle">
              <el-input v-model="form.remindtitle" placeholder="提醒标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提醒方式" prop="remindmode">
              <el-select style="width:100%" v-model="form.remindmode" multiple>
                <el-option label="短信" value="短信"></el-option>
                <el-option label="邮件" value="邮件"></el-option>
                <el-option label="弹框" value="弹框"></el-option>
                <el-option label="微信公众号" value="微信公众号" v-if="data.cansendbywechatservice"></el-option>
                <el-option label="企业微信" value="企业微信" v-if="data.cansendbyworkwechat"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="提醒内容" prop="content">
              <el-input type="textarea" v-model="form.content" placeholder="输入提醒内容,绑定表字段调用方式为 冒号+字段名，如 :createuserid，SQL语句的插入方式为大括号中加入SQL语句，如 {select name from sys_users where userid=:createuserid}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注说明" prop="remarks">
              <el-input type="textarea" v-model="form.remarks" placeholder="备注说明"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="角色权限" prop="isrole">
              <el-checkbox v-model="form.isrole" :true-label="1" :false-label="0"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.isrole">
            <el-form-item label="角色选择" prop="rolename">
              <multipleRole ref="role" :data="form" @onResult="roleResult" idName="roleid">
                <div slot="input">
                  <el-tag
                    :key="index"
                    v-for="(tag,index) in form.roleArr"
                    closable
                    :disable-transitions="false"
                    @close="handleCloseRole(tag)"
                    style="margin-right:10px;margin-bottom:10px">
                    {{tag.rolename}}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisibleRole"
                    v-model="inputValueRole"
                    ref="saveTagInputRole"
                    size="small"
                    @keyup.enter.native="handleInputConfirmRole"
                    @blur="handleInputConfirmRole"
                    style="width:88.81px"
                  >
                  </el-input>
                  <el-button v-else class="button-new-tag" size="small" @click="showInputRole">+ 添 加</el-button>
                </div>
              </multipleRole>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="人员权限" prop="isuser">
              <el-checkbox v-model="form.isuser" :true-label="1" :false-label="0"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.isuser">
            <el-form-item label="人员选择" prop="username">
              <multiplePeople :data="form" ref="user" @onResult="userResult" idName="userid">
                <div slot="input">
                  <el-tag
                    :key="index"
                    v-for="(tag,index) in form.userArr"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                    style="margin-right:10px;margin-bottom:10px">
                    {{tag.name}}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                    style="width:88.81px"
                  >
                  </el-input>
                  <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添 加</el-button>
                </div>

                <!-- <el-input type="text" readonly slot="input" v-model="form.username" @focus="$refs.user.drawer=true;$refs.user.normalSetId()"></el-input> -->
              </multiplePeople>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="人员sql查询" prop="sqlstr">
              <el-input type="textarea" v-model="form.sqlstr" placeholder="请输入人员sql查询"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import multipleRole from '@/template/multipleRole/index'
import multiplePeople from '@/template/multiplePeople/index'
export default {
  name: "add",
  props:['data'],
  components:{multipleRole,multiplePeople},
  data(){
    return {
      dialogFormVisible:false,
      form:{
        sys_remind_configid:0,
        remindtitle:'',
        remindmode:[],
        content:'',
        isrole:1,
        roleids:[],
        rolename:'',
        roleArr:[],
        isuser:1,
        userids:[],
        username:'',
        userArr:[],
        issql:1,
        sqlstr:''
      },
      rules:{
        accountno:[
          { required: true, message: '输入账户编号', trigger: 'blur'},
        ],
        accountname:[
          { required: true, message: '输入账户名称', trigger: 'blur'}
        ]
      },
      inputVisible:false,
      inputValue:'',
      inputVisibleRole:false,
      inputValueRole:''
    }
  },
  methods:{
    editBtn () {
      this.dialogFormVisible = true
      this.form = Object.assign({},this.form,this.data)
      console.log(this.data,'数据')
      this.form.userArr = this.form.userids.map(item => {
        return {
          name:this.form.usermsg[item],
          userid:item
        }
      })
      this.form.roleArr = this.form.roleids.map(item => {
        return {
          rolename:this.form.rolemsg[item],
          roleid:item
        }
      })
    },
    onSubmit(){
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        this.form.userids = this.form.userArr.map(item => item.userid)
        this.form.roleids = this.form.roleArr.map(item => item.roleid)
        const res = await this.$api.requested({
          "id": "20221220153201",
          "version":1,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.$refs['form'].resetFields();
          this.dialogFormVisible = false
        })
      })
    },
    handleClose(tag) {
      this.form.userArr.splice(this.form.userArr.indexOf(tag), 1);
      this.form.userids.splice(this.form.userids.indexOf(tag.userid),1)
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
        this.$refs.user.normalSetId()
        this.$refs.user.drawer = true
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue) {
        this.form.usermsg.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleCloseRole(tag) {
      this.form.roleArr.splice(this.form.roleArr.indexOf(tag), 1);
      this.form.roleids.splice(this.form.roleids.indexOf(tag.roleid),1)
    },

    showInputRole() {
      this.inputVisibleRole = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInputRole.$refs.input.focus();
        this.$refs.role.normalSetId()
        this.$refs.role.drawer = true
      });
    },

    handleInputConfirmRole() {
      let inputValueRole = this.inputValueRole
      if (inputValueRole) {
        this.form.usermsg.push(inputValueRole)
      }
      this.inputVisibleRole = false
      this.inputValueRole = ''
    },
    /* 角色选择结果 */
    roleResult (result) {
      result.forEach(item => {
        let is = this.form.roleArr.filter(item2 => item2.roleid == item.roleid)
        if (!is.length) this.form.roleArr.push(item)
      })
      console.log(this.form.roleArr);
    },
    /* 人员选择结果 */
    userResult (result) {
      console.log(result);
      result.forEach(item => {
        let is = this.form.userArr.filter(item2 => item2.userid == item.userid)
        if (!is.length) this.form.userArr.push(item)
      })
      // this.form.userArr.forEach(u => {
      //   result.forEach(r => {
      //     let result = u.filter(f => f.userid == r.userid)
      //     if (!result.length) {
      //       this.form.userArr.push(r)
      //     }
      //   })
      // })
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  margin-top: 0;
}
</style>