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

<template>
  <el-form class="bf-rulesofcompetency">
    <!-- 权限规则 -->
    <div class="right">
      <div class="paren_header">
        <p class="manageTitle">{{ title }}</p>
        <!-- <div class="header_right">
          <el-radio v-model="form.radio" :label="item.id" v-for="(item, index) in option" :key="index">{{ item.label }}</el-radio>
        </div> -->
      </div>
      <div class="form">
        <!-- <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>时效范围起</p>
          <el-date-picker v-model="form.firstWeeks" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间" size="small" :picker-options="pickerOptionsStart">
          </el-date-picker>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>时效范围至</p>
          <el-date-picker @change="setTime" v-model="form.endWeeks" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择时间" size="small" :picker-options="pickerOptionsEnd">
          </el-date-picker>
        </div> -->
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可查询行</p>
          <el-input v-model="form.query_row_condition" placeholder="请输入内容" size="small"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可查询列</p>
          <el-input v-model="form.query_col_conditon" placeholder="请输入内容" size="small"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可删除行</p>
          <el-input v-model="form.delete_row_condition" placeholder="请输入内容" size="small"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可新增列</p>
          <el-input v-model="form.new_col_condition" placeholder="请输入内容" size="small"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可编辑行</p>
          <el-input v-model="form.edit_row_condition" placeholder="请输入内容" size="small"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可编辑列</p>
          <el-input v-model="form.edit_col_condition" placeholder="请输入内容" size="small"></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: {
        query_row_condition: "",
        query_col_conditon: "",
        delete_row_condition: "",
        new_col_condition: "",
        edit_row_condition: "",
        edit_col_condition: ""
      },
      option: [
        {
          label: "显示权限",
          id: 1,
        },
        {
          label: "显示及编辑权限",
          id: 2,
        },
      ],
    };
  },
  watch: {
    authTo: {
      handler (obj) {
        // this.form = _.cloneDeep(obj)
        this.$store.dispatch("auth/changeAuthId", obj.auth_id)
      },
      deep: true,
    },
    form: {
      handler () {
        this.getData();
      },
      deep: true,
    },
    authList: {
      handler (arr) {
        this.$store.dispatch("auth/changeAuthList", arr);
        // this.$store.dispatch("auth/changeAuthMsg", arr);
        // this.$store.dispatch("auth/changeAuthArrs", arr);
      },
      deep: true,
    },
    "$store.state.auth.authMsg": {
      handler (arr) {
        const id = this.$store.getters.authId;
        const obj = arr.filter((item) => item.auth_id === id)[0];
        this.clearFormData();
        this.setFormData(_.cloneDeep(obj));
      },
      deep: true,
    }
  },
  methods: {
    getData () {
      const obj = _.cloneDeep(this.form);
      this.$emit("getData", obj);
      const arr = this.$store.getters.authArrs;
      const datas = _.unionBy(arr, "auth_id");
      const id = this.$store.getters.authId;
      // console.log(datas)
      if (datas.length) {
        // const dat = datas[datas.length - 1]
        let dat = datas[datas.length - 1];
        datas.map((item) => {
          if (item.auth_id == id) {
            dat = item;
          }
        });
        const { auth_id } = dat;
        obj["AuthId"] = auth_id;
        datas.forEach((item) => {
          if (item.auth_id == id) {
            item.AuthList = obj;
          }
        });
        this.$store.dispatch("auth/changeAuthArrs", datas);
      }
    },
    clearFormData () {
      this.form.query_row_condition = "";
      this.form.query_col_conditon = "";
      this.form.delete_row_condition = "";
      this.form.new_col_condition = "";
      this.form.edit_row_condition = "";
      this.form.edit_col_condition = "";
    },
    setFormData (obj) {
      let data = {};
      if (obj.AuthList) {
        data = obj.AuthList;
      } else {
        data = obj;
      }
      this.form = _.cloneDeep(data);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./rulesofcompetency.scss";
.el-picker-panel {
  > .el-picker-panel__footer {
    > .el-button--text {
      display: none;
    }
  }
}
</style>