CABaggageData2.0/src/components/rulesofcompetency/index2.vue

<template>
  <el-form class="bf-rulesofcompetency">
    <!-- 权限规则 -->
    <div class="right">
      <div class="paren_header">
        <p class="manageTitle">{{ title }}</p>
      </div>
      <div class="mt30">
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可查询行</p>
          <el-input @blur="getForm" v-model="form.QueryRow" placeholder="请输入内容" size="mini"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可查询列</p>
          <el-input @blur="getForm" v-model="form.QueryCol" placeholder="请输入内容" size="mini"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可删除行</p>
          <el-input @blur="getForm" v-model="form.DeleteRow" placeholder="请输入内容" size="mini"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可新增列</p>
          <el-input @blur="getForm" v-model="form.NewCol" placeholder="请输入内容" size="mini"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可编辑行</p>
          <el-input @blur="getForm" v-model="form.EditRow" placeholder="请输入内容" size="mini"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可编辑列</p>
          <el-input @blur="getForm" v-model="form.EditCol" placeholder="请输入内容" size="mini"></el-input>
        </div>
      </div>
    </div>
  </el-form>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: " ",
    },
    marginB: {
      type: String,
      default: "24px",
    },
    authTo: {
      type: Object,
      default: () => { },
    },
    authList: {
      type: Array,
      default: () => [],
    },
  },
  data () {
    return {
      form: {
        DeleteRow: null,
        EditCol: null,
        EditRow: null,
        NewCol: null,
        QueryCol: null,
        QueryRow: null,
      },
      newForm: {}
    };
  },
  watch: {
    "$store.state.auth.authArrs": {
      handler () {
        const id = this.$store.getters.authId
        const arr = this.$store.getters.authMsg
        const obj = arr.filter((item) => item.auth_id === id)[0]
        // console.log(obj)
        if (obj) {
          console.log(obj)
          // this.setFormData(obj)
        } else {
          console.log('ddd')
          this.clearFormData()
        }
      },
      deep: true
    },
    // form: {
    //   handler (obj) {
    //     const id = this.$store.getters.authId
    //     if (id) {
    //       const arr = this.$store.getters.authMsg
    //       obj.auth_id = id
    //       arr.push(obj)
    //       const datas = _.unionBy(arr, "auth_id")
    //       this.$store.dispatch("auth/changeAuthMsg", datas)
    //     } else {
    //       this.$message.error('请选中要授权的数据后再添加规则')
    //     }
    //   },
    //   deep: true
    // }
  },
  methods: {
    clearFormData () {
      this.form.NewCol = "";
      this.form.DeleteRow = "";
      this.form.QueryCol = "";
      this.form.QueryRow = "";
      this.form.EditCol = "";
      this.form.EditRow = "";
    },
    setFormData (obj) {
      let data = {}
      if (obj.AuthList) {
        data = obj.AuthList;
      } else {
        data = obj
      }
      this.form = data
    },
    getForm () {
      console.log('xxx')
      const id = this.$store.getters.authId
      if (id) {
        const arr = this.$store.getters.authMsg
        this.form.auth_id = id
        arr.push(this.form)
        const datas = _.unionBy(arr, "auth_id")
        console.log(arr)
        this.$store.dispatch("auth/changeAuthMsg", datas)
      } else {
        this.$message.error('请选中要授权的数据后再添加规则')
      }
    }
  },
};
</script>
<style lang="scss" scoped>
@import "./rulesofcompetency.scss";
.mt30 {
  margin-top: 30px;
}
</style>