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.input1" placeholder="请输入内容" size="small"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可查询列</p>
          <el-input v-model="form.input2" placeholder="请输入内容" size="small"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可删除行</p>
          <el-input v-model="form.input3" placeholder="请输入内容" size="small"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可新增列</p>
          <el-input v-model="form.input4" placeholder="请输入内容" size="small"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可编辑行</p>
          <el-input v-model="form.input5" placeholder="请输入内容" size="small"></el-input>
        </div>
        <div class="juris_list" :style="{ marginBottom: marginB }">
          <p>许可编辑列</p>
          <el-input v-model="form.input6" 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 {
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.form.endWeeks) {
            return time.getTime() >= new Date(this.endWeeks).getTime();
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.form.firstWeeks) {
            return (
              time.getTime() <= new Date(this.firstWeeks).getTime() - 86400000
            );
          }
        },
      },
      form: {
        endWeeks: "",
        firstWeeks: "",
        radio: 1,
        value1: "",
        value2: "",
        input1: "",
        input2: "",
        input3: "",
        input4: "",
        input5: "",
        input6: "",
      },
      option: [
        {
          label: "显示权限",
          id: 1,
        },
        {
          label: "显示及编辑权限",
          id: 2,
        },
      ],
    };
  },
  watch: {
    authTo: {
      handler (obj) {
        const {
          Action,
          ValidBegin,
          ValidEnd,
          QueryRow,
          QueryCol,
          NewCol,
          EditCol,
          EditRow,
          DeleteRow,
        } = obj;
        this.form.radio = Number(Action);
        this.form.firstWeeks = ValidBegin;
        this.form.endWeeks = ValidEnd;
        this.form.input1 = QueryRow;
        this.form.input2 = QueryCol;
        this.form.input3 = DeleteRow;
        this.form.input4 = NewCol;
        this.form.input5 = EditRow;
        this.form.input6 = EditCol;
      },
      deep: true,
    },
    form: {
      handler () {
        this.getData();
      },
      deep: true,
    },
    authList: {
      handler (arr) {
        this.$store.dispatch("auth/changeAuthList", 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(obj);
      },
      deep: true,
    },
  },
  methods: {
    setTime () {
      if (this.form.endWeeks <= this.form.firstWeeks) {
        this.form.endWeeks = "";
        this.$message.error("结束时间不能小于开始时间，请重新选择");
      }
    },
    getData () {
      const obj = {
        Action: this.form.radio,
        ValidBegin: this.form.firstWeeks,
        ValidEnd: this.form.endWeeks,
        QueryRow: this.form.input1,
        QueryCol: this.form.input2,
        NewCol: this.form.input4,
        EditCol: this.form.input6,
        EditRow: this.form.input5,
        DeleteRow: this.form.input3,
      };
      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.radio = "";
      this.form.firstWeeks = "";
      this.form.endWeeks = "";
      this.form.input1 = "";
      this.form.input2 = "";
      this.form.input3 = "";
      this.form.input4 = "";
      this.form.input5 = "";
      this.form.input6 = "";
    },
    setFormData (obj) {
      let data = {};
      if (obj.AuthList) {
        data = obj.AuthList;
      } else {
        data = obj;
      }
      const {
        Action = "",
        ValidBegin = "",
        ValidEnd = "",
        QueryRow = "",
        QueryCol = "",
        NewCol = "",
        EditCol = "",
        EditRow = "",
        DeleteRow = "",
      } = data;
      this.form.radio = Number(Action);
      this.form.firstWeeks = ValidBegin;
      this.form.endWeeks = ValidEnd;
      this.form.input1 = QueryRow;
      this.form.input2 = QueryCol;
      this.form.input3 = DeleteRow;
      this.form.input4 = NewCol;
      this.form.input5 = EditRow;
      this.form.input6 = EditCol;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./rulesofcompetency.scss";
.el-picker-panel {
  > .el-picker-panel__footer {
    > .el-button--text {
      display: none;
    }
  }
}
</style>