AnalysisSystemForRadionuclide_vue/src/views/system/modules/PermissionDataRuleModal.vue

<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelButtonProps="{ props: { type: 'warn' } }"
    cancelText="Cancel">

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="ruleName"
          label="Rule Name">
          <a-input placeholder="Please Enter Rule Name" v-model="model.ruleName"/>
        </a-form-model-item>
        <a-form-model-item
          v-show="showRuleColumn"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="ruleColumn"
          label="Rule Column">
          <a-input placeholder="Please Enter Rule Column" v-model.trim="model.ruleColumn"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="ruleConditions"
          label="Rule Conditions">
          <j-dict-select-tag @input="handleChangeRuleCondition" v-model="model.ruleConditions" placeholder="Please Enter Rule Conditions" dictCode="rule_conditions"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="ruleValue"
          label="Rule Value">
          <a-input placeholder="Please Enter Rule Value" v-model="model.ruleValue"/>
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="Status">
          <a-radio-group buttonStyle="solid" v-model="model.status">
            <a-radio-button value="1">Valid</a-radio-button>
            <a-radio-button value="0">Invalid</a-radio-button>
          </a-radio-group>
        </a-form-model-item>

      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
  import { httpAction } from '@/api/manage'

  export default {
    name: 'PermissionDataRuleModal',
    data() {
      return {
        queryParam: {},
        title: '操作',
        visible: false,
        model: {},
        ruleConditionList: [],
        labelCol: {
          xs: {span: 24},
          sm: {span: 5}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16}
        },
        confirmLoading: false,
        permissionId: '',
        validatorRules: {
          ruleConditions:  [{required: true, message: '请选择条件!'}],
          ruleName:[{required: true, message: '请输入规则名称!'}],
          ruleValue:  [{required: true, message: '请输入规则值!'}],
          ruleColumn: []
        },
        url: {
          list: '/sys/dictItem/list',
          add: '/sys/permission/addPermissionRule',
          edit: '/sys/permission/editPermissionRule'
        },
        showRuleColumn:true
      }
    },
    created() {
    },
    methods: {
      add(permId) {
        this.permissionId = permId
        //初始化默认值
        this.edit({status:'1'})
      },
      edit(record) {
        this.model = Object.assign({}, record)
        if (record.permissionId) {
          this.model.permissionId = record.permissionId
        } else {
          this.model.permissionId = this.permissionId
        }
        this.visible = true
        this.initRuleCondition()
      },
      close() {
        this.$emit('close')
        this.visible = false
        this.$refs.form.resetFields()
      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            httpAction(httpurl, this.model, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          }else{
            return false;
          }
        })
      },
      handleCancel() {
        this.close()
      },
      initRuleCondition(){
        if(this.model.ruleConditions && this.model.ruleConditions=='USE_SQL_RULES'){
          this.showRuleColumn = false
        }else{
          this.showRuleColumn = true
        }
      },
      handleChangeRuleCondition(val){
        if(val=='USE_SQL_RULES'){
          this.model.ruleColumn=''
          this.showRuleColumn = false
        }else{
          this.showRuleColumn = true
        }
      }
    }
  }
</script>

<style scoped>

</style>