Foshan4A4.0/src/components/rulesofcompetency/index.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.radio" :label="item.id" v-for="(item, index) in option" :key="index">{{ item.label }}</el-radio>
        </div>
      </div>
      <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="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.endWeeks" 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.input1" placeholder="请输入内容" size="mini"></el-input>
      </div>
      <div class="juris_list" :style="{ marginBottom: marginB }">
        <p>许可查询列</p>
        <el-input v-model="form.input2" placeholder="请输入内容" size="mini"></el-input>
      </div>
      <div class="juris_list" :style="{ marginBottom: marginB }">
        <p>许可删除行</p>
        <el-input v-model="form.input3" placeholder="请输入内容" size="mini"></el-input>
      </div>
      <div class="juris_list" :style="{ marginBottom: marginB }">
        <p>许可新增列</p>
        <el-input v-model="form.input4" placeholder="请输入内容" size="mini"></el-input>
      </div>
      <div class="juris_list" :style="{ marginBottom: marginB }">
        <p>许可编辑行</p>
        <el-input v-model="form.input5" placeholder="请输入内容" size="mini"></el-input>
      </div>
      <div class="juris_list" :style="{ marginBottom: marginB }">
        <p>许可编辑列</p>
        <el-input v-model="form.input6" 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 {
      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.AuthId === 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('get-data', obj)
      const arr = this.$store.getters.authArrs
      const datas = _.unionBy(arr, 'AuthId')
      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.AuthId == id) {
            dat = item;
          }
        })
        const { AuthId } = dat
        obj["AuthId"] = AuthId
        datas.forEach(item => {
          if (item.AuthId == 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>