app-cur-org-dept.vue

<template>
  <div ref="orgDept" class="app-cur-org-dept">
    <van-collapse v-model="active">
        <van-collapse-item  :name="1">
          <div slot="title" class="org-title-content">
            <div class="org-icon"><img :src="baseUrl+'/assets/images/org-dept/team.svg'" alt=""></div>
            <div class="org-title">{{visibleTitle}}</div>
          </div>
          <div class="org-item"  v-for="item in datas" :key="item.id" @click="itemClick(item)">
              <div class="org-item-left">
                <div class="org-icon"><img :src="baseUrl+'/assets/images/org-dept/user.svg'" alt=""></div>
                <div class="user-name">{{item.label}}</div>
              </div>
              <div class="checkbox">
                <div class="org-icon-small">
                  <img v-if="item.check" :src="baseUrl+'/assets/images/org-dept/check-circle-colour.svg'" alt="">
                  <img v-else :src="baseUrl+'/assets/images/org-dept/check-circle.svg'" alt="">
                </div>
              </div>
          </div>
        </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script lang="ts">
import { Environment } from "@/environments/environment";
import { LogUtil } from "ibiz-core";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
@Component({})
export default class AppCommonMicrocom extends Vue {

  /**
   * 图片基础路径
   * @type {any}
   *  @memberof AppCommonMicrocom
   */
  public baseUrl = process.env.NODE_ENV === 'development' ? '' : '/' + Environment.AppName.toLowerCase();
  /**
   * 数据接口地址
   *
   * @type {string}
   * @memberof AppCommonMicrocom
   */
  @Prop()
  public url!: string;

  /**
   * 填充属性
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  @Prop()
  public fillMap!: any;

  /**
   * 关联属性
   *
   * @type {string}
   * @memberof AppCommonMicrocom
   */
  @Prop()
  public valueitem!: string;

  /**
   * 表单项名称
   *
   * @type {string}
   * @memberof AppCommonMicrocom
   */
  @Prop()
  public name!: string;

  /**
   * 局部上下文导航参数
   *
   * @type {any}
   * @memberof AppCheckBox
   */
  @Prop() public localContext!: any;

  /**
   * 局部导航参数
   *
   * @type {any}
   * @memberof AppCheckBox
   */
  @Prop() public localParam!: any;

  /**
   * 上下文
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  @Prop()
  public context!: any;

  /**
   * 视图参数
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  @Prop()
  public viewparams!: any;

  /**
   * 表单数据对象
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  @Prop()
  public data!: any;

  /**
   * 是否启用
   *
   * @type {boolean}
   * @memberof AppCommonMicrocom
   */
  @Prop()
  public disabled?: boolean;

  /**
   * 只读模式
   *
   * @type {boolean}
   */
  @Prop({ default: false })
  public readonly?: boolean;

  /**
   * 是否多选
   *
   * @type {boolean}
   * @memberof AppCommonMicrocom
   */
  @Prop({ default: 'false' })
  public multiple?: string;

  /**
   * 是否多选
   *
   * @type {boolean}
   * @memberof AppCommonMicrocom
   */
  public relMultiple:boolean = false;

  /**
   * 地址过滤参数
   *
   * @type {boolean}
   * @memberof AppCommonMicrocom
   */
  @Prop()
  public filter!: string;

  /**
   * 请求方式
   *
   * @type {string}
   * @memberof AppCommonMicrocom
   */
  @Prop({ default: "get" })
  public requestMode!: "get" | "post" | "delete" | "put";

  /**
   * 激活项
   *
   * @type {boolean}
   * @memberof AppCommonMicrocom
   */
  public active:Array<any> = [1];

  /**
   * 请求结束
   *
   * @type {boolean}
   * @memberof AppCommonMicrocom
   */
  public overLoadding:boolean = false;

  /**
   * 表单项标题
   *
   * @type {string}
   * @memberof AppCommonMicrocom
   */
  public title:string = '';

  /**
   * 显示标题
   *
   * @type {string}
   * @memberof AppCommonMicrocom
   */
  get visibleTitle(){
    return `${this.title}${this.overLoadding?'（'+this.datas.length+'）':''}`
  }

  /**
   * 选中项集合
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  public selects: any[] = [];

  /**
   * 数据集合
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  public datas: any[] = [];

  /**
   * 回显值
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  public selectArray: any[] = [];

  /**
   * 主键属性
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  keyFile:string = '';

  /**
   * 文本属性
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  labelFile:string = '';


  /**
   * 项点击
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  itemClick(item:any){
    const isCheck = !item.check;
    if(!this.relMultiple){
      this.datas.forEach((_item) => {
        if(item.id != _item.id){
          _item.check = false; 
        }else{
          _item.check = isCheck;
        }
      });
    }else{
      item.check = isCheck;
    }
    this.selectChange(item);
    this.$forceUpdate();
  }

  /**
   * 值变化
   *
   * @type {*}
   * @memberof AppGroupSelect
   */
  @Watch("data", {
    immediate: true,
    deep: true,
  })
  onValueChange(newVal: any, oldVal: any) {
    console.log(newVal);
    
    this.selects = [];
    if (newVal) {
      let item: any = {};
      item.label = this.data[this.name] ? this.data[this.name].split(",") : [];
      item.id = this.data[this.valueitem]
        ? this.data[this.valueitem].split(",")
        : [];
      this.selectArray = item.id;
      if (this.fillMap) {
        for (let key in this.fillMap) {
          item[this.fillMap[key]] = this.data[key]
            ? this.data[key].split(",")
            : [];
        }
      }
      if (item.label.length > 0) {
        item.label.forEach((val: string, index: number) => {
          let _item: any = {};
          for (let key in item) {
            _item[key] = item[key][index] ? item[key][index] : null;
          }
          this.selects.push(_item);
        });
      }
    }
  }

  /**
   * 生命周期
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  public created() {
    this.relMultiple = this.multiple =='true'?true:false;
    const keyRep = this.fillMap?.replace("{id:'","");
    const keyRepArr = keyRep?.split("',");
    if(keyRepArr){
      this.keyFile = keyRepArr[0];
    }
   const textArr = this.fillMap?.replace("label:'","").split(",")
    if(textArr){
      this.labelFile = textArr[1]?.replace("'}","");
    }
    this.load();
  }

  /**
   * 处理特殊filter参数
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  public handleFilterValue(value: string) {
    if (value && value.startsWith("%") && value.endsWith("%")) {
      const key = value.slice(1, value.length - 1);
      if (this.data && this.data.hasOwnProperty(key)) {
        return this.data[key];
      } else if (this.context && this.context[key]) {
        return this.context[key];
      } else if (this.viewparams && this.viewparams[key]) {
        return this.viewparams[key];
      }
    }
    return value;
  }

  /**
   * 解析URL
   *
   * @type {*}
   * @param context 上下文参数
   * @param viewparams 视图参数
   * @memberof AppCommonMicrocom
   */
  public parseURL(context: any, viewparams: any) {
    let url = this.url;
    const filterArr: Array<any> = this.filter ? this.filter.split("|") : [];
    const urlParm = url.match(/\${(.+?)\}/g);
    if (urlParm) {
      urlParm.forEach((item: string) => {
        const key = item.substring(2, item.length - 1).toLowerCase();
        const res = new RegExp("\\${" + key + "}");
        let value = null;
        const isFilterKey = key.match(/filter/g) ? true : false;
        if (isFilterKey) {
          const filterIndex = key.slice(6);
          if (filterIndex) {
            if (
              isNaN(parseInt(filterIndex)) ||
              filterArr.length < parseInt(filterIndex) - 1
            ) {
              LogUtil.warn(this.$t("components.microcom.filterwarn"));
            } else {
              value = this.handleFilterValue(
                filterArr[parseInt(filterIndex) - 1]
              );
            }
          } else {
            value = filterArr[0];
          }
        } else {
          if (this.data && this.data.hasOwnProperty(key)) {
            value = this.data[key];
          } else if (context && context[key]) {
            value = context[key];
          } else if (viewparams && viewparams[key]) {
            value = viewparams[key];
          }
        }
        url = url.replace(res, value);
      });
    }
    return url;
  }

  /**
   * 公共参数处理
   *
   * @param {*} arg
   * @returns
   * @memberof AppCheckBox
   */
  public handlePublicParams(arg: any) {
    // 合并表单参数
    arg.param = this.viewparams
      ? JSON.parse(JSON.stringify(this.viewparams))
      : {};
    arg.context = this.context ? JSON.parse(JSON.stringify(this.context)) : {};
    // 附加参数处理
    if (this.localContext && Object.keys(this.localContext).length > 0) {
      let _context = this.$util.computedNavData(
        this.data,
        arg.context,
        arg.param,
        this.localContext
      );
      Object.assign(arg.context, _context);
    }
    if (this.localParam && Object.keys(this.localParam).length > 0) {
      let _param = this.$util.computedNavData(
        this.data,
        arg.param,
        arg.param,
        this.localParam
      );
      Object.assign(arg.param, _param);
    }
  }

  /**
   * 加载数据
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  public load() {
    let data: any = {};
    this.handlePublicParams(data);
    // 参数处理
    let context = data.context;
    let viewparam = data.param;
    const url = this.parseURL(context, viewparam);
    if (url) {
      this.datas = [];
      this.$http[this.requestMode](url)
        .then((response: any) => {
          if (response && response.status == 200) {
            this.overLoadding = true;
            if (response.data.length > 0) {
              let item: any;
              response.data.forEach((_item: any) => {
                item = _item;
                item.label = _item[this.labelFile];
                item.id = _item[this.keyFile];
                this.datas.push(item);
              });
            }
          }
          console.log(this.datas);
        })
        .catch((response: any) => {
          console.log(this.datas);
        });
    }
  }

  /**
   * 选中数据改变
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  public selectChange(item: any) {
    this.selects = [];
    if (this.relMultiple) {
        this.datas.forEach((_item: any) => {
          if (_item.check) {
            this.selects.push(_item);
          }
        });
    } else {
      this.selects.push(item);
    }
    this.setValue();
  }

  /**
   * 设置值
   *
   * @type {*}
   * @memberof AppCommonMicrocom
   */
  public setValue() {
    let item: any = {};
    item[this.name] = null;
    if (this.valueitem) {
      item[this.valueitem] = null;
    }
    if (this.relMultiple == true) {
      this.selects.forEach((select: any) => {
        item[this.name] = item[this.name]
          ? `${item[this.name]},${select.label}`
          : select.label;
        if (this.valueitem) {
          item[this.valueitem] = item[this.valueitem]
            ? `${item[this.valueitem]},${select.id}`
            : select.id;
        }
      });
    } else {
      item[this.name] = this.selects.length > 0 ? this.selects[0].label : null;
      if (this.valueitem) {
        item[this.valueitem] =
          this.selects.length > 0 ? this.selects[0].id : null;
      }
    }
    for (let key in item) {
      // 抛出当前表单项与值项
      if (Object.is(key, this.name) || Object.is(key, this.valueitem)) {
        this.$emit("formitemvaluechange", { name: key, value: item[key] });
      }
    }
  }

  mounted(){
    //删除元素标题 自定义绘制
   const orgDept:any =  this.$refs.orgDept;
   const parent = orgDept?.parentNode;
   const label:any = parent?.previousElementSibling;
   if(label){
     this.title = label.textContent;
     label.style.display="none";
   }
   // 默认填满
   if(parent){
     parent.style.width= '100%'; 
   }
  }
}
</script>

<style lang='less'>
@import "./app-cur-org-dept.less";
</style>