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

<template>
  <div class="FSQattributeEdit" v-if="detail">
    <div class="content">
      <van-form ref="tabstoreVal" @submit="onSubmit" @failed="onFailed">
        <van-field
          v-model="detail.estimateSalesYearTarget"
          type="number"
          :rules="[
            {
              validator: estimateSalesYearTargetValidator,
              required: true,
              message: '年预估销额目标必须≥30千元',
            },
          ]"
          label="年预估销额目标(单位:千元):">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          v-model="detail.zgwqWorkerNum"
          type="number"
          :rules="[
            {
              validator: zgwqWorkerNumValidator,
              required: true,
              message: '旗下质感外墙工人数量必须大于0',
            },
          ]"
          label="旗下质感外墙工人数量:">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          v-model="detail.projectYearNum"
          type="number"
          :rules="[
            {
              validator: zgwqWorkerNumValidator,
              required: true,
              message: '年预估承接项目数量必须大于0',
            },
          ]"
          label="年预估承接项目数量:">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          label="是否经营竞品:"
          :rules="[{ required: true, message: '请选择是否经营竞品' }]">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
          <template #input>
            <van-radio-group v-model="detail.operateCompetitor" direction="horizontal">
              <van-radio name="是">是</van-radio>
              <van-radio name="否">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-if="detail.operateCompetitor == '是'"
          v-model="detail.mainCompetitorBrand"
          label="主营竞品品牌:"
          autosize
          rows="2"
          :rules="[
            {
              validator: mainCompetitorBrandValidator,
              required: true,
              message: '至少一个汉字',
            },
          ]"
          type="textarea">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
        <van-field
          v-if="detail.operateCompetitor == '是'"
          v-model="detail.mainCompetitorSalesYear"
          type="number"
          :rules="[
            {
              validator: zgwqWorkerNumValidator,
              required: true,
              message: '竞品年销额必须大于0',
            },
          ]"
          label="竞品年销额（单位：千元）:">
          <template #left-icon>
            <span class="van-f-red">*</span>
          </template>
        </van-field>
      </van-form>
    </div>
  </div>
</template>

<script>
import { updateStore } from '@/api/FSQStore';
export default {
  name: 'FSQattributeEdit',
  props: {
    storeArchives: {
      type: Object,
    },
    fromData: {
      type: Object,
    },
  },
  data() {
    return {
      detail: null,
    };
  },
  watch: {
    storeArchives: {
      handler(val) {
        if (val) this.detail = JSON.parse(JSON.stringify(val));
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    estimateSalesYearTargetValidator(val) {
      return val >= 30;
    },
    zgwqWorkerNumValidator(val) {
      return val > 0;
    },
    mainCompetitorBrandValidator(val) {
      return /[\u4e00-\u9fa5]/.test(val);
    },
    onSubmit(value) {
      this.toastLoading(0, '加载中...', true);
      let params = {
        ...this.fromData,
      };
      params.serviceProviderArchives = this.detail;
      params.serviceProviderArchives.storeCode = this.fromData.storeCode;
      params.storeId = this.$route.query.id;
      updateStore(params).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          this.$dialog
            .confirm({
              title: '系统提示',
              message: '修改成功',
              showCancelButton: false,
            })
            .then(() => {
              this.$emit('onClickLeft');
            });
        }
      });
    },
    onFailed(errorInfo) {
      this.$toast('服务商档案：' + errorInfo.errors[0].message);
    },
  },
};
</script>

<style lang="scss">
.FSQattributeEdit {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  .content {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    padding: 10px 15px;
    margin-top: 10px;
    background: #fff;

    .van-f-red {
      color: red;
      width: 4px;
      display: inline-block;
    }
    .van-field__label {
      width: 7em;
    }
  }
  .van-form {
    // height: 100%;
  }
}
</style>