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:250px" v-model="form.remindmode" multiple>
                <el-option label="短信" value="短信"></el-option>
                <el-option label="邮件" value="邮件"></el-option>
                <el-option label="弹框" value="弹框"></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">
                <el-input type="text" readonly slot="input" v-model="form.rolename" @focus="$refs.role.drawer=true;$refs.role.normalSetId()"></el-input>
              </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">
                <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-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:'',
        isuser:1,
        userids:[],
        username:'',
        issql:1,
        sqlstr:''
      },
      rules:{
        accountno:[
          { required: true, message: '输入账户编号', trigger: 'blur'},
        ],
        accountname:[
          { required: true, message: '输入账户名称', trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    editBtn () {
      this.dialogFormVisible = true
      this.form = Object.assign({},this.form,this.data)
      this.form.rolename = Object.values(this.form.rolemsg).join(',')
      this.form.username = Object.values(this.form.usermsg).join(',')
    },
    onSubmit(){
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        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
        })
      })
    },
    /* 角色选择结果 */
    roleResult (result) {
      this.form.rolename = result.map(item => item.rolename).join(',')
      this.form.roleids = result.map(item => item.roleid)
      console.log(this.form.rolename,result);
      
    },
    /* 人员选择结果 */
    userResult (result) {
      console.log(result);
      
      this.form.username = result.map(item => item.name).join(',')
      this.form.userids = result.map(item => item.userid)
      console.log(this.form.username,this.form.userids);
      
    }
  } 
}
</script>

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