123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- <template>
- <view class="container">
- <evan-form ref="formData" :rules="ruleValidate" :model="formData">
- <evan-form-item label="角色名称" prop="name">
- <input class="form-input" :maxlength="30" placeholder-class="form-input-placeholder" placeholder="请输入角色名称(最多30个字符)" v-model="formData.name" />
- </evan-form-item>
- <evan-form-item label="角色描述" prop="remarks">
- <textarea placeholder-class="form-input-placeholder" :maxlength="500" placeholder="请输入描述(最多500个字符)" v-model="formData.remarks"/>
- </evan-form-item>
- <evan-form-item label="状态" prop="roleState">
- <view style="width: 100%;display:flex;justify-content: flex-end;">
- <u-radio-group v-model="formData.isEnable">
- <u-radio
- v-for="(item, index) in list" :key="index"
- :name="item.value"
- shape="circle"
- >
- {{item.name}}
- </u-radio>
- </u-radio-group>
- </view>
- </evan-form-item>
- <view class="form-footer-btn">
- <button @click="cancel()">取消</button>
- <button type="primary" :loading="loading" :style="{background:$config('buttonColors')}" @click="save('formData')">保存</button>
- </view>
- </evan-form>
- </view>
- </template>
- <script>
- import {saveRolePower} from '@/api/powerRole-md.js'
- export default{
- name:"formData",
- data(){
- return{
- loading: false,
- formData:{
- name:'',
- isEnable:'',
- remarks:''
- },
- type: '', // edit 编辑页 add 新增页
- list: [
- {
- value: 1,
- name: '启用',
- disabled: false,
- },
- {
- value: 0,
- name: '禁用',
- disabled: false
-
- }
- ],
- ruleValidate: {
- name: [
- { required: true, message: '请输入角色名称', trigger: 'change' },
- {
- validator: (rule, value, callback) => {
- let reg = /^[^<|>]{1,30}$/
- if(reg.test(value)){
- callback()
- }else{
- callback(new Error('请输入不含<或>的字符,最多30个字符'))
- }
- }
- }
- ],
- isEnable: [
- {
- required: true, type:'string',message: '请选择状态', trigger: 'blur'
- }
- ],
- },
- }
- },
- onLoad(options) {
- console.log(options)
- this.type = options.type
- uni.setNavigationBarTitle({
- title: this.type=="add" ? '添加角色' : '编辑角色'
- })
- this.init()
- },
- methods:{
- // 初始化数据
- init(){
- if(this.type=='edit'){
- let data = this.$store.state.vuex_nowRoleInfo
- console.log(data)
- this.formData.name = data.name
- this.formData.isEnable = data.isEnable
- this.formData.remarks = data.remarks || ''
- this.formData.id = data.id
- }else{
- this.formData.name =''
- this.formData.isEnable = 0
- this.formData.remarks =''
- this.formData.id =''
- }
- },
- // 保存
- save(name){
- let data=this.formData
- this.formData.isEnable = String(this.formData.isEnable)
- console.log(data)
- this.$refs[name].validate((valid) => {
- if (valid) {
- this.loading = true
- saveRolePower(data).then(res=>{
- // console.log(res)
- if(res.status == 200){
- uni.showToast({icon: 'none', title: res.message})
- this.cancel()
- }else{
- uni.showToast({icon: 'none', title: res.message})
- }
- this.loading = false
- }).catch(err=>{
- this.loading = false
- })
- }
- })
- },
- // 取消
- cancel(){
- setTimeout(function(){
- uni.navigateBack()
- }, 300)
- }
- }
- }
- </script>
- <style lang="less">
- page{
- height: 100%;
- background: #FFFFFF;
- }
- .container{
- margin: 0 30rpx;
- .form-input-placeholder{
- text-align: right;
- }
- textarea {
- text-align: right;
- margin: 20upx;
- height: 100upx;
- width: 95%;
- }
- }
- </style>
|