前端模糊查询

<template>
  <div>
    <el-dialog custom-class="dialog-content" class="print-content" width="850px" :close-on-click-modal="false" append-to-body :show-close="false" top="0" :visible.sync="isVisible">
      <div slot="title" class="compontent-header">
        <span class="title">{{$t('member.MemberProfile.lang_memberprofile_272')}}</span>
        <i class="iconfont dianadanchuangquxiao close" @click="handleClose"></i>
      </div>
      <div style="position:relative;">
        <div v-if="this.profileNameData.fullName"  class="showNameLeft">{{$t('member.MemberProfile.lang_memberprofile_72')}}{{profileNameData.fullName}}</div>
        <div v-if="this.profileNameData.jointName" class="showNameRight">{{$t('member.MemberProfile.lang_memberprofile_72')}}{{profileNameData.jointName}}</div>
        <div style="float:right;">
          <el-form label-width="108px">
            <el-row>
              <el-col>
                <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_31')">
                  <el-input v-model="searchLoyaltyNo" :disabled="noPermission" class="disStyle"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div style="float:right;">
          <el-form label-width="108px">
            <el-row>
              <el-col>
                <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_29')">
                  <el-select v-model="searchLoyaltyType" filterable :disabled="noPermission" class="disStyle"  @change="getMemberType">
                    <el-option v-for="item in getProfileMemberTypeData" :key="item.dictCode" :label="item.dictName" :value="item.dictCode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="cl"></div>
      
      <div class="addressButton">
        <el-button size="mini" type="primary" :disabled="noPermission" @click="newProfile">{{$t('member.MemberProfile.lang_memberprofile_91')}}</el-button>
        <el-button size="mini" type="danger"  :disabled="showDelete" @click="deleteProfile">{{$t('member.MemberProfile.lang_memberprofile_92')}}</el-button>
        <el-button size="mini" class="searchButton" type="primary" :disabled="noPermission" @click="searchLoyalty">{{$t('member.MemberProfile.lang_memberprofile_104')}}</el-button>
      </div>
      <div>
        <el-table :data="tableData" ref="singleTable" height="250" @row-dblclick="rowDblclick" @selection-change="selectChecked" border style="width: 100%">
          <el-table-column type="selection" width="55px"></el-table-column>
          <el-table-column prop="loyaltyTypeName" :label="$t('member.MemberProfile.lang_memberprofile_29')">
          </el-table-column>
          <el-table-column prop="loyaltyLevelName" :label="$t('member.MemberProfile.lang_memberprofile_30')">
          </el-table-column>
          <el-table-column prop="loyaltyNo" :label="$t('member.MemberProfile.lang_memberprofile_31')">
          </el-table-column>
          <el-table-column prop="loyaltyEffectiveTime" :label="$t('member.MemberProfile.lang_memberprofile_269')">
          </el-table-column>
          <el-table-column prop="isPref" width="158px">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" class="showPrimary" :disabled="noPermission" @click="rowDblclick(scope.row)">{{$t('member.MemberProfile.lang_memberprofile_218')}}</el-button>
              <span class="primary" v-if="scope.row.isPref === true">
                {{$t('member.MemberProfile.lang_memberprofile_273')}}
              </span>
              <el-button size="mini" type="primary" class="setPrimary" :disabled="noPermission" @click="setPrimaryButton(scope.row)" v-else>{{$t('member.MemberProfile.lang_memberprofile_212')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 新增 -->
    <el-dialog width="600px" style="z-index:9999" custom-class="dialog-content" class="print-content" :close-on-click-modal="false" append-to-body :show-close="false" top="40px" v-if="addDialog" :visible.sync="addDialog">
      <div slot="title" class="compontent-header">
        <span class="title">{{$t('member.MemberProfile.lang_memberprofile_270')}}</span>
        <i class="iconfont dianadanchuangquxiao close" @click="handleClose2"></i>
      </div>
      <div class="logCont">
        <el-form label-width="108px" ref="form" :model="form" :rules="rules">
          <el-row>
            <!-- 会员类型 -->
            <el-col :span="10">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_29')" prop="loyaltyType">
                <el-select v-model="form.loyaltyType" filterable  @change="getMemberType">
                  <el-option v-for="item in getProfileMemberTypeData" :key="item.dictCode" :label="item.dictName" :value="item.dictCode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 会员等级 -->
            <el-col :span="10">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_30')" prop="loyaltyLevel">
                <el-select v-model="form.loyaltyLevel" @change="getMemberLevel">
                  <el-option v-for="item in getProfileMemberData" :key="item.dictCode" :label="item.dictName" :value="item.dictCode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_109')" prop="loyaltyNo">
                <el-input v-model="form.loyaltyNo" maxlength="16"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_269')" prop="loyaltyEffectiveTime">
                <el-date-picker v-model="form.loyaltyEffectiveTime" value-format="yyyy-MM-dd" type="date">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="twoButton">
          <el-button size="mini" type="primary" @click="okDialog">{{$t('member.MemberProfile.lang_memberprofile_83')}}</el-button>
          <el-button size="mini" type="danger"  @click="handleClose2">{{$t('member.MemberProfile.lang_memberprofile_84')}}</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog width="600px" style="z-index:9999" custom-class="dialog-content" class="print-content" :close-on-click-modal="false" append-to-body :show-close="false" top="40px" v-if="editDialog" :visible.sync="editDialog">
      <div slot="title" class="compontent-header">
        <span class="title">{{$t('member.MemberProfile.lang_memberprofile_94')}}</span>
        <i class="iconfont dianadanchuangquxiao close" @click="handleClose3"></i>
      </div>
      <div class="logCont">
        <el-form label-width="108px" ref="form" :model="form" :rules="rules">
          <el-row>
            <el-col :span="10">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_29')" prop="loyaltyType">
                <el-select v-model="form.loyaltyType" filterable @change="getMemberType">
                  <el-option v-for="item in getProfileMemberTypeData" :key="item.dictCode" :label="item.dictName" :value="item.dictCode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_30')" prop="loyaltyLevel">
                <el-select v-model="form.loyaltyLevel" @change="getMemberLevel">
                  <el-option v-for="item in getProfileMemberData" :key="item.dictCode" :label="item.dictName" :value="item.dictCode">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_109')" prop="loyaltyNo">
                <el-input v-model="form.loyaltyNo" maxlength="16"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item :label="$t('member.MemberProfile.lang_memberprofile_269')" prop="loyaltyEffectiveTime">
                <el-date-picker v-model="form.loyaltyEffectiveTime" value-format="yyyy-MM-dd" type="date">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="twoButton">
          <el-button size="mini" type="primary" @click="ediltDialog">{{$t('member.MemberProfile.lang_memberprofile_83')}}</el-button>
          <el-button size="mini" type="danger"  @click="handleClose3">{{$t('member.MemberProfile.lang_memberprofile_84')}}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch, Emit } from "vue-property-decorator";
import { ILoyalty } from "@/store/types/member/memberProfileRequest";
import { LangHelper } from "@/utils/i18n";
import { Message } from "element-ui";
import {
  deleteLoyaltyList,
  getLoyaltyList,
  getMemberCodeList,
  saveLoyaltyInsert,
} from "@/api/member";
import { ElForm } from "element-ui/types/form";
import { UserModule } from "@/store/modules/user";

@Component({
  name: "ProfileAddress",
})
export default class ProfileAddress extends Vue {
  @Prop() private isVisible!: boolean;
  @Prop() private profileData!: any;
  @Prop() private otherGlobalId!: any;
  @Prop() private profileNameData!: any; //姓名
  @Prop() private noPermission!: boolean; //判断权限
  private showDelete:boolean = true;
  private tableData: any = [];
  private content: any = [];
  private localstorageData: any = [];
  private getProfileMemberTypeData: any = []; //会员类型
  private getProfileMemberData: any = []; //个人会员
  private form = new ILoyalty(); //会员参数
  private getCloseLoyaltyArrary: string = "";
  private loyaltyTypeName: string = "";
  private loyaltyLevelName: string = "";
  private searchLoyaltyNo: string = ""; // 搜索条件
  private searchLoyaltyType: string = "";
  @Emit("cancel")
  private cancel() {
    const param = {
      name: "operateAddress",
    };
    return param;
  }
  // 暴露保存事件
  @Emit("saveLoyaltyArray")
  private saveLoyaltyArray() {
    return this.getCloseLoyaltyArrary;
  }

  // 必填
  private rules = {
    loyaltyType: [
      {
        required: true,
        message: LangHelper.getMessage(
          "member.MemberProfile.lang_memberprofile_37"
        ),
        trigger: ["blur", "change"],
      },
    ],
    loyaltyLevel: [
      {
        required: true,
        message: LangHelper.getMessage(
          "member.MemberProfile.lang_memberprofile_37"
        ),
        trigger: ["blur", "change"],
      },
    ],
    loyaltyNo: [
      {
        required: true,
        message: LangHelper.getMessage(
          "member.MemberProfile.lang_memberprofile_95"
        ),
        trigger: ["blur", "change"],
      },
      {min: 15, max: 16, message: LangHelper.getMessage("member.MemberProfile.lang_memberprofile_274"), trigger:["blur"]}
    ],
    loyaltyEffectiveTime: [
      {
        required: true,
        message: LangHelper.getMessage(
          "member.MemberProfile.lang_memberprofile_37"
        ),
        trigger: ["blur", "change"],
      },
    ]
  };
  private checkData: [] = []; //勾选数据
  // 新增
  private addDialog: boolean = false;
  // 编辑
  private editDialog: boolean = false;

  private created() {
    this.getProfileMemberType();
    this.getNewData();
  }

  // 搜索数据
  getNewData(){
    if(this.profileData.id === ""){
      const getCreateData = sessionStorage.getItem("createLoyalty") ;
      if(getCreateData !== null){
        this.tableData = [];
        this.content = [];
        this.tableData = [...JSON.parse(getCreateData)];
        this.content = [...JSON.parse(getCreateData)];
      }
    }else{
      this.getProfileAddressList();
    }
  }

  // 会员类型
  async getProfileMemberType() {
    const dictPcode = "room_price_guestCode";
    const dictRootCode = "room_price_guestCode";
    this.getProfileMemberTypeData = await getMemberCodeList(
      dictPcode,
      dictRootCode
    );
  }

  // 切换会员类型
  getMemberType(val: any) {
    this.form.loyaltyLevel = "";
    this.getProfileMemberTypeData.forEach((element: any) => {
      if (val === element.dictCode) {
        this.form.loyaltyTypeName = element.dictName;
      }
    });
    this.getProfileMember(val);
  }

  // 个人会员等级
  async getProfileMember(val: any) {
    const dictPcode = val;
    const dictRootCode = "room_price_guestCode";
    this.getProfileMemberData = await getMemberCodeList(
      dictPcode,
      dictRootCode
    );
  }

  // 会员等级 
  getMemberLevel(val:any){
    this.getProfileMemberData.forEach((element: any) => {
      if (val === element.dictCode) {
        this.form.loyaltyLevelName = element.dictName;
      }
    });
  }

  // 地址列表
  async getProfileAddressList() {
    this.tableData = await getLoyaltyList(this.profileData.id,UserModule.GetHotelId);
  }

  // 取消
  handleClose() {
    this.getNewData();
    if (this.tableData.length > 0) {
      this.getCloseLoyaltyArrary = this.tableData;
      this.saveLoyaltyArray();
    }else{
      this.getCloseLoyaltyArrary = "";
      this.saveLoyaltyArray();
    }
    this.cancel();
  }

  handleClose2() {
    if(this.form.loyaltyEffectiveTime ==="2099-12-31" && this.form.loyaltyType ==="" && this.form.loyaltyNo ==="" && this.form.loyaltyLevel ===""){
      this.addDialog = false;
    }else{
      (this as any).$confirm(`${(this as any).$t("member.MemberProfile.lang_memberprofile_113")}`, `${(this as any).$t("member.MemberProfile.lang_memberprofile_96")}`, {
        distinguishCancelAndClose: true,
        confirmButtonText: `${(this as any).$t("member.MemberProfile.lang_memberprofile_210")}`,
        cancelButtonText: `${(this as any).$t("member.MemberProfile.lang_memberprofile_209")}`
      })
      .then(() => {
      })
      .catch((action: string) => {
        this.addDialog = false;
      });
    }
  }
  handleClose3() {
    this.editDialog = false;
  }
  //  新增
  newProfile() {
    this.form = new ILoyalty();
    this.addDialog = true;
  }
  //  双击修改
  rowDblclick(row: any) {
    if(this.noPermission === false){
      this.form = JSON.parse(JSON.stringify(row));
      this.getProfileMember(row.loyaltyType);
      this.editDialog = true;
    } else {
      this.editDialog = false;
    }
  }

  // 创建
  async okDialog() {
    (this.$refs["form"] as ElForm).validate(async (valid) => {
      if (valid) {
        if(this.profileData.id === ""){
          const getCreateData = {
            index:this.localstorageData.length,
            loyaltyNo:this.form.loyaltyNo,
            loyaltyEffectiveTime:this.form.loyaltyEffectiveTime,
            loyaltyType:this.form.loyaltyType,
            loyaltyTypeName:this.form.loyaltyTypeName,
            loyaltyLevel:this.form.loyaltyLevel,
            loyaltyLevelName:this.form.loyaltyLevelName,
            loyaltySystem: "HWORD",
            loyaltyId:"0",
            isPref:this.localstorageData.length === 0 ? true:false,
          }
          this.localstorageData.push(getCreateData);
          sessionStorage.setItem("createLoyalty", JSON.stringify(this.localstorageData));
          this.addDialog = false;
          this.getNewData();
          this.searchLoyalty();
        }else{
          const getAddress = Object.assign(this.form, {
            profId: this.profileData.id,
            profType: this.profileData.type,
            hotelId:UserModule.GetHotelId,
            loyaltySystem: "HWORD",
            loyaltyId:"0",
            createUser:this.profileNameData.fullName?this.profileNameData.fullName:this.profileNameData.jointName,
          });

          const result = await saveLoyaltyInsert(getAddress as any)
            .then((result) => {
              this.getProfileAddressList(); //刷新列表
              this.addDialog = false;
              this.getNewData();
              this.searchLoyalty();
            })
            .catch((err) => err);
          }
      }
    });
  }

  // 修改
  ediltDialog() {
    (this.$refs["form"] as ElForm).validate(async (valid) => {
      if (valid) {
        if(this.profileData.id === ""){
          const getCreateData = {
            index:this.form.index,
            loyaltyNo:this.form.loyaltyNo,
            loyaltyEffectiveTime:this.form.loyaltyEffectiveTime,
            loyaltyType:this.form.loyaltyType,
            loyaltyTypeName:this.form.loyaltyTypeName,
            loyaltyLevel:this.form.loyaltyLevel,
            loyaltyLevelName:this.form.loyaltyLevelName,
            loyaltySystem: "HWORD",
            loyaltyId:"0",
            isPref:this.form.isPref,
          }
          this.localstorageData.forEach((item:any)=>{
            const idx = this.localstorageData.findIndex((i:any) => i.index == getCreateData.index) // 判断id是否已存在
            idx < 0 ? this.localstorageData.push(getCreateData) : this.localstorageData.splice(idx, 1, getCreateData)  // id不存在新增，相同则修改
          })
          sessionStorage.setItem("createLoyalty", JSON.stringify(this.localstorageData));
          this.editDialog = false;
          this.getNewData();
          this.searchLoyalty();
        }else{
          const getAddress = Object.assign(this.form, {
            profId: this.profileData.id,
            profType: this.profileData.type,
            hotelId:UserModule.GetHotelId,
            loyaltySystem: "HWORD",
            loyaltyId:"0",
            createUser:this.profileNameData.fullName?this.profileNameData.fullName:this.profileNameData.jointName,
          });
          const result = await saveLoyaltyInsert(getAddress as any)
            .then((result) => {
              Message.success(LangHelper.getMessage("member.MemberProfile.lang_memberprofile_207") as string);
              this.editDialog = false;
              this.getProfileAddressList(); //刷新列表
              this.getNewData();
              this.searchLoyalty();
            })
            .catch((err) => err);
          }
      }
    });
  }

  // 勾选
  selectChecked(val: any) {
    if(this.noPermission === false){
      if(val.length === 0){
        this.showDelete = true;
      }else{
        this.checkData = val;
        this.showDelete = false;
      }
    } else {
      this.showDelete = true;
    }
  }

  // 设置主地址
  async setPrimaryButton(val: any) {
    if(this.profileData.id === ""){
      this.content.forEach((item:any)=>{
        item.isPref = false;
      })
      val.isPref = true;
      this.content.map((item:any,index:any) => { // 主地址显示在第一条
        if(item.isPref == true){
          this.content.unshift(this.content.splice(index , 1)[0]);
        }
      })
      sessionStorage.setItem("createLoyalty", JSON.stringify(this.content));
      this.getNewData();
      this.searchLoyalty();
    }else{
      const parma = Object.assign(val, {
        profId: this.profileData.id,
        profType: this.profileData.type,
        hotelId:UserModule.GetHotelId,
        isPref: true,
        id: val.id,
      });
      const result = await saveLoyaltyInsert(parma as any)
        .then((result) => {
          Message.success(LangHelper.getMessage("member.MemberProfile.lang_memberprofile_206") as string);
          this.editDialog = false;
          this.getProfileAddressList(); //刷新列表
          this.getNewData();
          this.searchLoyalty();
        })
        .catch((err) => err);
    }
  } 

  // 删除
  deleteProfile() {
    const rows = this.checkData;
    (this as any)
      .$confirm(
        `${(this as any).$t("member.MemberProfile.lang_memberprofile_97")}`,
        `${(this as any).$t("member.MemberProfile.lang_memberprofile_96")}`,
        {
          distinguishCancelAndClose: true,
          cancelButtonText: `${(this as any).$t(
            "order.SingleRmInfo.lang_singlerminfo_73"
          )}`,
          confirmButtonText: `${(this as any).$t(
            "order.SingleRmInfo.lang_singlerminfo_72"
          )}`,
        }
      )
      .then(async () => {
         if(this.profileData.id === ""){
           for (let i = 0; i < rows.length; i++) {
            this.localstorageData.splice((rows[i] as any).index, rows.length);
            for (let j = 0; j < this.localstorageData.length; j++) {  
              this.localstorageData[j].index = j; // id重新排序
              if(this.localstorageData.length === 1){ // 删除到只有一个时候，设为主地址
                this.localstorageData[j].isPref = true;
              }
              // 如果删除的是主地址，将第二条置为主地址
              if((rows[j] as any).isPref === true){
                this.localstorageData[0].isPref = true;
              }
              sessionStorage.setItem("createLoyalty", JSON.stringify(this.localstorageData));
            }
          }
          sessionStorage.setItem("createLoyalty", JSON.stringify(this.localstorageData));
          this.getNewData();
          this.searchLoyalty();
         } else{
          const ids = [];
          for (let i = 0; i < rows.length; i++) {
            ids.push((rows[i] as any).id);
          }
          const deleteContent = await deleteLoyaltyList(ids);
            (this as any).$message({
              type: "success",
              message: LangHelper.getMessage("order.SingleRmInfo.lang_131"),
            });
            this.getProfileAddressList(); //刷新列表
            this.getNewData();
            this.searchLoyalty();
        }
      })
      .catch((action: any) => {});
  }

  // 会员信息搜索
  searchLoyalty(){
    var restaurants =  this.content;
    if(this.searchLoyaltyNo !== "" && this.searchLoyaltyType === ""){
      var results = restaurants.filter(this.createStateFilter(this.searchLoyaltyNo));
      this.tableData = results;
    }
    if(this.searchLoyaltyNo === "" && this.searchLoyaltyType !== ""){
      var results = restaurants.filter(this.createLoyaltyTypeFilter(this.searchLoyaltyType));
      this.tableData = results;
    }
    if(this.searchLoyaltyType !== "" && this.searchLoyaltyNo !== ""){
      var searchLoyaltyTypeData = restaurants.filter(this.createLoyaltyTypeFilter(this.searchLoyaltyType));
      var results = searchLoyaltyTypeData.filter(this.createStateFilter(this.searchLoyaltyNo));
      this.tableData = results;
    }
    if(this.searchLoyaltyNo === "" && this.searchLoyaltyType === ""){
      this.tableData = this.content;
    }
  }

  createStateFilter(queryString: any) {
    return (state: any) => {
      return (
        state.loyaltyNo.toLowerCase().indexOf(queryString.toLowerCase()) === 0 );
    };
  }

  createLoyaltyTypeFilter(queryString: any) {
    return (state: any) => {
      return (
        state.loyaltyType.toLowerCase().indexOf(queryString.toLowerCase()) === 0 );
    };
  }

}
</script>
<style lang="less" scoped>
.print-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
fieldset {
  padding: 10px;
  margin: 10px 20px;
  color: #0fbdd6;
  border: #000 dashed 1px;
}
.border-input {
  width: 113%;
}
.addressButton {
  display: flex;
  margin: 0 0 10px 0;
}
.cl {
  clear: both;
}
.searchButton {
  float: right;
  right: 10px;
  position: absolute;
}
.showNameLeft{
  float:left;
  margin-top:12px;
}
.showNameRight{
  float:left;
  margin-top:12px;
}
.twoButton {
  display: flex;
  justify-content: center;
  align-content: center;
  margin-top: 10px;
}
/deep/ .el-input-group__append {
  border-right: 1px solid #dcdcdc;
}
.primary {
  color: #3f9543;
}
.showPrimary{
  width:40px;
  color: #fff;
  cursor: pointer;
}
.setPrimary {
  width:75px;
  color: #fff;
  cursor: pointer;
}
</style>