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

<template>
  <el-form class="bf-rulesofcompetency">
    <!-- 权限规则 -->
    <div class="right">
      <div class="paren_header">
        <p>{{ title }}</p>
        <div class="header_right">
          <el-radio
            v-model="form.Action"
            :label="item.id"
            v-for="(item, index) in option"
            :key="index"
            >{{ item.label }}</el-radio
          >
        </div>
      </div>
      <div>
        <span>{{name}}</span>
      </div>
      <div class="juris_list" :style="{ marginBottom: marginB }">
        <p>时效范围起</p>
        <el-date-picker
          v-model="form.ValidBegin"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择时间"
          size="mini"
          :picker-options="pickerOptionsStart"
        >
        </el-date-picker>
      </div>
      <div class="juris_list" :style="{ marginBottom: marginB }">
        <p>至</p>
        <el-date-picker
          @change="setTime"
          v-model="form.ValidEnd"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择时间"
          size="mini"
          :picker-options="pickerOptionsEnd"
        >
        </el-date-picker>
      </div>
      <div class="juris_list" :style="{ marginBottom: marginB }">
        <p>许可查询行</p>
        <el-input
          v-model="form.QueryRow"
          placeholder="请输入内容"
          size="mini"
        ></el-input>
      </div>
      <div class="juris_list" :style="{ marginBottom: marginB }">
        <p>许可查询列</p>
        <el-input
          v-model="form.QueryCol"
          placeholder="请输入内容"
          size="mini"
        ></el-input>
      </div>
      <div class="juris_list" :style="{ marginBottom: marginB }">
        <p>许可删除行</p>
        <el-input
          v-model="form.DeleteRow"
          placeholder="请输入内容"
          size="mini"
        ></el-input>
      </div>
      <div class="juris_list" :style="{ marginBottom: marginB }">
        <p>许可新增列</p>
        <el-input
          v-model="form.NewCol"
          placeholder="请输入内容"
          size="mini"
        ></el-input>
      </div>
      <div class="juris_list" :style="{ marginBottom: marginB }">
        <p>许可编辑行</p>
        <el-input
          v-model="form.EditRow"
          placeholder="请输入内容"
          size="mini"
        ></el-input>
      </div>
      <div class="juris_list" :style="{ marginBottom: marginB }">
        <p>许可编辑列</p>
        <el-input
          v-model="form.EditCol"
          placeholder="请输入内容"
          size="mini"
        ></el-input>
      </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 {
      name:"",
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.endWeeks) {
            return time.getTime() >= new Date(this.endWeeks).getTime();
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.firstWeeks) {
            return (
              time.getTime() <= new Date(this.firstWeeks).getTime() - 86400000
            );
          }
        },
      },
      form: {
        AuthId:null,
        DeleteRow: null,
        EditCol: null,
        Action: null,
        EditRow: null,
        NewCol: null,
        QueryCol: null,
        QueryRow: null,
        ValidBegin: null,
        ValidEnd: null,
      },
      option: [
        {
          label: "显示权限",
          id: 1,
        },
        {
          label: "显示及编辑权限",
          id: 2,
        },
      ],
      oldVal: null,
    };
  },
  watch: {
    "$store.state.auth.authId": {
      handler(val) {
        if (val && val.AuthId && this.oldVal == null) {
          this.oldVal = val;
          this.getFormData(val.AuthId);
          this.name = val.AuthName;
        }
        if (val && val.AuthId && this.oldVal != null) {
          if (val.AuthId != this.oldVal.AuthId) {
          this.name = val.AuthName;
            this.setAuthListData(val);
          }
        }
      },
      deep: true,
    },
  },
  methods: {
    getFormData(id) {
      this.form = {
        AuthId:null,
        DeleteRow: null,
        EditCol: null,
        Action: null,
        EditRow: null,
        NewCol: null,
        QueryCol: null,
        QueryRow: null,
        ValidBegin: null,
        ValidEnd: null,
      }
      let list = this.$store.state.auth.authList;
      // console.log(list)
      let idArr = [];
      list.forEach((item) => {
        // console.log(item)
        if(item!=null){
        idArr.push(item.AuthId);
        }
        else{
          idArr.push(null);
        }
      });
      let index = idArr.indexOf(id);
      if(index>-1){
        this.form = this.$store.state.auth.authList[index];
      }
      else{
        this.form.AuthId = id;
      }
      console.log( this.form)
    },
    setAuthListData(data) {
      let list = this.$store.state.auth.authList;
      let idArr = [];
      list.forEach((item) => {
        if(item.AuthId){
        idArr.push(item.AuthId);
        }
        else{
          idArr.push(null);
        }
      });
      let index = idArr.indexOf(this.oldVal.AuthId);
      if(index>-1){
        this.$store.state.auth.authList[index] = this.form;
      }
      else{
        this.$store.state.auth.authList.push(this.form)
      }
      this.oldVal = data;
      this.getFormData(data.AuthId);
    },
    setTime(val) {
      if (this.endWeeks < this.firstWeeks) {
        this.endWeeks = "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./rulesofcompetency.scss";
.el-picker-panel {
  > .el-picker-panel__footer {
    > .el-button--text {
      display: none;
    }
  }
}
</style>