jiliangxiaochengxu/components/companiesRegistered/companiesInformation.vue

<!-- @format -->

<template>
  <view class="container">
    <view style="color: #3c9cff" class="informationTitle">企业信息</view>
    <view class="informationContent">
      <view class="contentItems">
        <u-form
          ref="uForm"
          :model="formdData.companiesOrcResult"
          :rules="rules"
          labelWidth="140"
          labelPosition="top"
        >
          <view class="content">
            <u-form-item
              :required="true"
              style="border-bottom: 1px solid rgb(242, 242, 242)"
              label="单位类别:"
              prop="type"
            >
              <!-- <view class="message">{{
                formdData.companiesOrcResult.type
              }}</view> -->
              <u-input
                disabled
                :value="formdData.companiesOrcResult.type"
              ></u-input>
            </u-form-item>
          </view>

          <view class="content">
            <u-form-item
              :required="true"
              label="统一社会信用代码:"
              prop="regNum"
            >
              <u-input
                @blur="
                  () => {
                    this.$emit('update:formdData', {
                      ...this.formdData,
                      companiesOrcResult: {
                        ...this.formdData.companiesOrcResult,
                        regNum: form.regNum,
                      },
                    });
                  }
                "
                v-model="form.regNum"
              ></u-input> </u-form-item
          ></view>
          <view class="content">
            <u-form-item :required="true" label="单位名称:" prop="name">
              <u-input
                @blur="
                  () => {
                    this.$emit('update:formdData', {
                      ...this.formdData,
                      companiesOrcResult: {
                        ...this.formdData.companiesOrcResult,
                        name: form.name,
                      },
                    });
                  }
                "
                v-model="form.name"
              ></u-input> </u-form-item
          ></view>
          <view class="content">
            <u-form-item :required="true" label="登录用户名:">
              <!-- <view
                style="
                  width: 380rpx;
                  font-size: 30rpx;
                  color: rgb(146, 146, 146);
                "
                >{{ formdData.companiesOrcResult.regNum }}</view
              > -->
              <u-input
                disabled
                :value="formdData.companiesOrcResult.regNum"
              ></u-input>
            </u-form-item>
          </view>
          <view class="content">
            <u-form-item prop="region" :required="true" label="单位所属区域:">
              <vvSelectArea
                :list="areas"
                v-model="region"
                placeholder="请选择所在区域"
              ></vvSelectArea> </u-form-item
          ></view>

          <view class="content">
            <u-form-item :required="true" label="单位注册地址:">
              <u-input
                @blur="
                  () => {
                    this.$emit('update:formdData', {
                      ...this.formdData,
                      companiesOrcResult: {
                        ...this.formdData.companiesOrcResult,
                        address: form.address,
                      },
                    });
                  }
                "
                v-model="form.address"
              ></u-input>
            </u-form-item>
          </view>
          <view class="content">
            <u-form-item :required="true" label="法人代表/负责人:">
              <u-input
                @blur="
                  () => {
                    this.$emit('update:formdData', {
                      ...this.formdData,
                      companiesOrcResult: {
                        ...this.formdData.companiesOrcResult,
                        person: form.person,
                      },
                    });
                  }
                "
                v-model="form.person"
              ></u-input>
            </u-form-item>
          </view>

          <view class="content">
            <u-form-item prop="location" :required="true" label="单位地理位置:">
              <view
                class="iconMap"
                v-if="!formdData.companiesOrcResult.location"
              >
                <view></view>
                <u-icon
                  @click="handleGetMap"
                  name="map-fill"
                  color="#909399"
                  size="30"
                ></u-icon>
              </view>
              <view v-else>{{ formdData.companiesOrcResult.location }}</view>
            </u-form-item>
          </view>

          <view class="content">
            <u-form-item
              prop="postalAddress"
              :required="true"
              label="单位通讯地址:"
            >
              <!-- <view class="message">{{
                formdData.companiesOrcResult.postalAddress
              }}</view> -->

              <u-input
                disabled
                :value="formdData.companiesOrcResult.postalAddress"
              ></u-input>
            </u-form-item>
          </view>
        </u-form>
      </view>
    </view>
  </view>
</template>

<script>
import vvSelectArea from "@/components/vv-select-area/vv-select-area";
import { getRegiong } from "@/api/companiesRegistered";
export default {
  components: {
    vvSelectArea,
  },
  async created() {
    Object.keys(this.form).forEach((ele) => {
      this.form[ele] = this.formdData.companiesOrcResult[ele];
    });

    if (this.formdData.companiesOrcResult.region) {
      this.region = this.formdData.companiesOrcResult.region;
    }
    try {
      let { data } = await getRegiong();
      this.areas = data;
    } catch (error) {}
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
    this.$emit("update:companiesInformationRef", this.$refs.uForm);
  },
  data() {
    return {
      form: {
        regNum: null,
        name: null,
        address: null,
        person: null,
        address: null,
      },
      rules: {
        type: [
          {
            required: true,
          },
        ],
        address: [
          {
            required: true,
            message: "单位注册地址不能为空不能为空",
            trigger: "blur",
          },
        ],
        person: [
          {
            required: true,
            message: "法人代表不能为空",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "单位名称不能为空",
            trigger: "blur",
          },
        ],
        regNum: [
          {
            required: true,
            message: "统一社会信用代码不能为空",
            trigger: "blur",
          },
        ],
        location: [
          {
            required: true,
            message: "地理位置不能为空",
            trigger: "blur",
          },
        ],
        postalAddress: [
          {
            required: true,
            message: "通讯地址不能为空",
            trigger: "blur",
          },
        ],
        region: [
          {
            required: true,
            message: "所在区域不能为空",
            trigger: "blur",
          },
        ],
      },
      region: null, //单位所属区域
      show: true,
      areas: [], // 地址list
    };
  },
  props: {
    formdData: {
      type: Object,
      default: () => ({}),
    },
    companiesInformationRef: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    region(newVal) {
      console.log(this.formdData, this.region);
      this.$emit(
        "update:formdData",
        Object.assign({
          ...this.formdData,
          companiesOrcResult: {
            ...this.formdData.companiesOrcResult,
            region: this.region.join(","),
          },
        })
      );
    },
  },
  methods: {
    handleForm(key) {
      console.log(this.formdData);
    },
    //获取位置
    handleGetMap() {
      uni.authorize({
        scope: "scope.userLocation",
        success: (res) => {
          uni.chooseLocation({
            success: (res) => {
              this.$emit(
                "update:formdData",
                Object.assign({
                  ...this.formdData,
                  companiesOrcResult: {
                    ...this.formdData.companiesOrcResult,
                    location: `${res.latitude},${res.longitude}`,
                    postalAddress: res.address,
                  },
                })
              );

              // console.log("位置名称：" + res.name);
              // console.log("详细地址：" + res.address);
              // console.log("纬度：" + res.latitude);
              // console.log("经度：" + res.longitude);
            },
          });
        },
        fail(err) {},
      });
    },
  },
};
</script>

<style lang="scss">
.iconMap {
  display: flex;
  justify-content: space-between;
}
.informationTitle {
  margin-bottom: 30rpx;
  font-size: 30;
}

.contentItems {
  width: 100%;
  border-radius: 6px;
  background: #fff;
  margin: 0rpx auto 30rpx;
  padding: 20rpx 30rpx 20rpx;

  .content {
    border-bottom: 1px solid rgb(242, 242, 242);
  }

  .content:last-child {
    border-bottom: none;
  }

  .title {
    font-size: 30rpx;
    color: black;
    letter-spacing: 3rpx;
  }

  .message {
    text-align: right;
    width: 380rpx;
    font-size: 30rpx;
    color: rgb(146, 146, 146);
    // white-space: nowrap;
    // /* 禁止文本换行 */
    // overflow: hidden;
    // /* 隐藏超出容器的文本 */
    // text-overflow: ellipsis;
    /* 使用省略号表示被截断的文本 */
  }
}
</style>