MacaoBankWeb/src/components/autostruct/auto-setting.vue

<template>
  <div>
    <el-row>
      <avue-form ref="form" v-model="form" :option="option" @submit="settingSave">
        <template slot="setting">
          <el-row v-if="form.num > 1">
            <el-steps :active="active">
              <el-step v-for="i in form.num" @click.native="stepClick(i)" :key="i"></el-step>
            </el-steps>
          </el-row>
          <el-row  v-for="i in form.num" :key="i">
            <div v-if="i == active">
              <select-user :multiple="form.approveType == 2" :name="selectPersonName" :callback="selectCallback"></select-user>
            </div>
          </el-row>
        </template>
      </avue-form>
    </el-row>


  </div>
</template>

<script>
  import SelectUser from "../select-dialog/select-user";
  export default {
    name: "auto-setting",
    components: {SelectUser},
    props: {
      flowSetting: Object,
      default: {}
    },
    data(){
      return {
        active: 1,
        form: {
          num: 1,
          approveType: 1,
          settingType: 1,
        },
        selectPersonName: '',
        settingPersons:[
          {
            id:'',
            name:'',
            ehr:'',
          },
        ],
        option: {
          column: [
            {
              label: "串並行",
              prop: "approveType",
              span: 6,
              type: "radio",
              dicData: [{
                label: '串行',
                value: 1
              }, {
                label: '並行',
                value: 2
              }],
            },
            {
              label: "設置方式",
              prop: "settingType",
              span: 6,
              type: "radio",
              display: true,
              dicData: [{
                label: '統一設置',
                value: 1
              }, {
                label: '逐級設置',
                value: 2
              }],
            },
            {
              label: "審批節點",
              prop: "num",
              type: 'number',
              span: 6,
              minRows: 1,
              maxRows: 6,
              row:true,
              readonly: true,
              value: 1
            },
            {
              label: "節點設置",
              prop: "setting",
              display: true,
              formslot: true
            }
          ]
        }


      }
    },
    created() {
      if (this.flowSetting.approveType > 0){
        this.form.approveType = this.flowSetting.approveType;
        this.form.settingType = this.flowSetting.settingType;
        this.form.num = this.flowSetting.num;
        this.form.setting = this.flowSetting.setting;

        this.settingPersons = JSON.parse(this.form.setting);
        if (this.form.approveType == 2){
          //並行，多選
          let nameArr = [];
          this.settingPersons.forEach(item => {
            nameArr.push(item.name)
          })
          this.selectPersonName = nameArr.join()
        }else{
          this.selectPersonName = this.settingPersons[0].name;
        }
        console.log(this.selectPersonName)
      }
    },
    watch: {
      "form.approveType": function(newValue, oldValue){
        this.option.column[1].display = newValue == 1
        this.option.column[2].display = newValue == 1
        this.option.column[3].display = newValue == 2 || ( newValue == 1 && this.form.settingType == 1)
      },
      "form.settingType": function(newValue, oldValue){
        // this.option.column[2].display = newValue == 2
        this.option.column[3].display = newValue == 1
        // this.option.column[3].display = newValue == 1 && this.form.approveType == 2
      },
      "form.num": function(newValue, oldValue){
        if (Math.abs(newValue-oldValue) > 1){
          return;
        }
        console.log(newValue + '-' + oldValue)
        if (newValue < oldValue){
          //-
          this.settingPersons.pop()
        }else{
          //+
          let item = {
            id:'',
            name:'',
            ehr:'',
          }
          this.settingPersons.push(item)
        }
      },
    },
    computed(){
      /*test: function(){
        return false;
      }*/
    },
    methods: {
      stepClick(step){
        this.active = step;
        let selectObj = this.settingPersons[step-1];
        console.log('stepClick')
        console.log(this.settingPersons)
        this.selectPersonName = selectObj.name;
        console.log(this.selectPersonName)
      },
      handleChange(){

      },
      selectCallback(selectList){
        if (this.form.approveType == 1){
          let row = selectList[0]
          let item = {}
          item.id = row.id;
          item.name = row.name;
          item.ehr = row.ehr;
          this.settingPersons[this.active-1] = item;
        }else{
          this.settingPersons = selectList;
        }
      },
      settingSave(row, done){
        row.setting = JSON.stringify(this.settingPersons);
        this.$emit("callback", row)
        done();
      },
    }
  }
</script>

<style scoped>

</style>