storevisit-ui-mobile/src/views/storeManagement/FSQStoreEdit.vue

<template>
  <div class="FSQStoreDetailCont">
    <div class="header">
      <van-nav-bar
        class="navBar"
        title="仿石漆服务商编辑"
        left-arrow
        @click-left="onClickLeft"
        right-text="保存"
        @click-right="clickSubmit" />
    </div>
    <div class="content">
      <div class="detailHeader">
        <van-icon name="volume" color="#64a8eb" size="18" />
        <span>如需修改服务商的姓名和手机号，请提IT工单到低代码合同系统修改</span>
      </div>
      <van-tabs
        class="myTab"
        v-model="tabVal"
        color="#0057ba"
        @change="tabChange"
        :lazy-render="false">
        <van-tab title="基础信息" name="insidePlan" ref="dispsps">
          <van-form
            ref="tabstoreVal"
            @submit="onSubmit"
            :scroll-to-error="true"
            :show-error="false">
            <van-field disabled :value="fromData.storeCode" label="编号">
              <template #left-icon>
                <span class="van-f-red"></span>
              </template>
            </van-field>
            <van-field
              v-model="fromData.storeName"
              label="名称"
              placeholder="请输入名称"
              disabled
              :rules="[{ required: true, message: '请输入名称' }]">
              <template #left-icon>
                <span class="van-f-red"></span>
              </template>
            </van-field>
            <van-field
              disabled
              clickable
              name="picker"
              :value="fromData.storeCategoryName"
              label="类型"
              placeholder="点击选择类型">
              <template #left-icon>
                <span class="van-f-red"></span>
              </template>
            </van-field>
            <van-field
              v-model="fromData.orgName"
              label="销售部"
              placeholder="请输入销售部"
              disabled
              :rules="[{ required: true, message: '请输入销售部' }]">
              <template #left-icon>
                <span class="van-f-red"></span>
              </template>
            </van-field>
            <van-row style="border-bottom: 1px solid #ebedf0">
              <van-field
                rows="1"
                autosize
                type="textarea"
                disabled
                clickable
                name="picker"
                :value="fromData.chainName"
                label="经销商名称"
                placeholder="点击选择经销商名称"
                :rules="[
                  {
                    required: true,
                    message: '请选择经销商',
                  },
                ]">
                <template #left-icon>
                  <span class="van-f-red"></span>
                </template>
              </van-field>
            </van-row>
            <van-field
              disabled
              clickable
              name="picker"
              :value="fromData.provinceName"
              label="省(州)"
              placeholder="点击选择省(州)">
              <template #left-icon>
                <span class="van-f-red"></span>
              </template>
            </van-field>
            <van-field
              disabled
              clickable
              name="picker"
              :value="fromData.cityName"
              label="城市"
              placeholder="点击选择城市">
              <template #left-icon>
                <span class="van-f-red"></span>
              </template>
            </van-field>
            <van-field
              disabled
              clickable
              name="picker"
              :value="fromData.districtName"
              label="区(县)"
              placeholder="点击选择区(县)">
              <template #left-icon>
                <span class="van-f-red"></span>
              </template>
            </van-field>
            <van-field
              disabled
              clickable
              name="picker"
              :value="fromData.townName"
              label="街道"
              placeholder="点击选择街道">
              <template #left-icon>
                <span class="van-f-red"></span>
              </template>
            </van-field>
            <van-field
              v-model="fromData.addressLine"
              label="地址"
              placeholder="请输入地址"
              rows="1"
              autosize
              type="textarea">
              <template #left-icon>
                <span class="van-f-red"></span>
              </template>
            </van-field>
            <van-field disabled v-model="fromData.contactName" label="实际经营人">
              <template #left-icon>
                <span class="van-f-red"></span>
              </template>
            </van-field>
            <van-field
              disabled
              type="tel"
              v-model="fromData.telephone"
              label="实际经营人电话"
              placeholder="请输入实际经营人电话"
              :rules="[
                {
                  required: false,
                  validator: FSQValidatePhone,
                  message: '请输入手机号',
                },
              ]">
              <template #left-icon>
                <span class="van-f-red"></span>
              </template>
            </van-field>
            <van-field
              disabled
              v-model="fromData.salesmanName"
              label="所属销售员"
              placeholder="所属销售员">
              <template #left-icon>
                <span class="van-f-red"></span>
              </template>
            </van-field>
          </van-form>
        </van-tab>
        <!-- 质感服务商档案 -->
        <van-tab title="服务商档案" name="outsidePlan">
          <FSQattributeEdit
            ref="FSQattribute"
            :storeArchives="fromData.serviceProviderArchives"
            :fromData="fromData"
            @onClickLeft="onClickLeft"></FSQattributeEdit>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getById, phoneCheck } from '@/api/index';
import FSQattributeEdit from './FSQattributeEdit.vue';
export default {
  components: { FSQattributeEdit },
  data() {
    return {
      tabVal: 'insidePlan',
      fromData: {
        storeCode: '',
        storeName: '',
        telephone: '',
        storeCategoryName: '',
        provinceName: '',
        cityName: '',
        districtName: '',
        addressLine: '',
        orgName: '',
        chainName: '',
        townName: '',
        contactName: '',
        salesmanName: '',
      },
    };
  },
  activated() {
    this.tabVal = 'insidePlan';
    this.toastLoading(0, '加载中...', true);
    // 获取详情
    this.getDetail();
  },
  methods: {
    editorFn() {
      this.$router.push({
        path: '/addDesignerEdit',
        query: { id: this.$route.query.id },
      });
    },
    getDetail() {
      getById({ storeId: this.$route.query.id }).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          this.fromData = res.data;
        }
      });
    },
    clickSubmit(values) {
      // 基础信息校验
      this.$refs.tabstoreVal.submit();
    },
    onSubmit(value) {
      //属性信息校验
      this.$refs.FSQattribute.$refs.tabstoreVal.submit();
    },
    FSQValidatePhone(telephone) {
      return new Promise((resolve, reject) => {
        if (telephone == '') {
          resolve();
        }
        var telrg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        if (telephone.trim() == '') {
          reject();
        } else if (!telrg.test(telephone)) {
          this.Toast('手机号格式错误');
          reject();
        } else {
          phoneCheck({ phoneNumber: telephone }).then((res) => {
            if (res.code == 200) {
              resolve();
            } else {
              this.Toast('手机号格式错误');
              reject();
            }
          });
        }
      });
    },
    tabChange(name, title) {},
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss">
.FSQStoreDetailCont {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .header {
    height: 46px;
  }
  .detailHeader {
    padding: 10px 20px;
    background: #dfeeff;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    .van-icon {
      margin-right: 8px;
    }
    span {
      line-height: 20px;
      color: #323233;
    }
  }
  .content {
    flex: 1;
    overflow-y: auto;
  }
  .myTab {
    height: 100%;
    .van-tabs__content {
      height: 100%;
      .van-tab__pane {
        height: 100%;
      }
    }
  }
  .myTab .van-tabs__nav--card {
    margin: 0 !important;
    border-left: 0;
    border-right: 0;
  }

  .myTab .van-tabs__wrap,
  .myTab .van-tabs__nav--card {
    height: 40px;
  }

  .myTab .van-tab {
    // line-height: 40px;
  }

  .van-f-red {
    color: red;
    width: 4px;
    display: inline-block;
  }
}
</style>