usky-web-mobile/src/pages/business/mhxf/unitInfoCollection/index.vue

<template>
  <view id="unitInfoCollection" v-if="!successBool">
    <view>
      <u-notice-bar :text="noticeBarText" :duration="7000" color="#FF0000" bgColor="#FFFFFF"></u-notice-bar>
    </view>

    <view class="centerOne" v-if="pagingBool">
      <view class="title"> 单位基本信息（1/2） </view>

      <u--form :model="form" ref="uForm" :rules="rules" labelWidth="130">
        <view style="padding: 10px 0">
          <view style="padding: 10px 10px 20px 10px; background: #ffffff">
            <view style="padding-left: 9px">
              <u-form-item label="单位名称" prop="companyName" required :borderBottom="true">
                <u-input v-model="form.companyName" placeholder="请输入单位名称" border="none">
                  <template #suffix>
                    <u-icon name="search" color="#999999" size="22" @click="companySubmit(form.companyName)"></u-icon>
                  </template>
                </u-input>
              </u-form-item>
              <u-form-item label="统一社会信用代码" prop="organization" required :borderBottom="true">
                <u-input v-model="form.organization" placeholder="请输入统一社会信用代码" border="none" maxlength="18" />
              </u-form-item>
              <u-form-item label="法人代表" prop="delegateName" required :borderBottom="true">
                <u-input v-model="form.delegateName" placeholder="请输入法人代表" border="none" />
              </u-form-item>
              <u-form-item label="所属街镇" prop="streetTown" required :borderBottom="true" @click="handleAction('所属街镇')">
                <u-input v-model="form.streetTown" placeholder="请选择所属街镇" suffixIcon="arrow-right" suffixIconStyle="color: #909399" border="none" />
              </u-form-item>
              <u-form-item label="单位地址" prop="address" required :borderBottom="true">
                <u-input v-model="form.address" placeholder="请输入单位地址" border="none" />
              </u-form-item>
              <u-form-item label="消防管理人电话" prop="fireManagePhone" required :borderBottom="true">
                <u-input v-model="form.fireManagePhone" placeholder="请输入消防管理人电话" border="none" maxlength="11" />
              </u-form-item>
              <u-form-item label="成立时间" prop="foundTime" required :borderBottom="true" @click="handleDateTime('成立时间', 0, form.foundTime)">
                <u-input v-model="form.foundTime" placeholder="请选择成立时间" border="none" suffixIcon="calendar" suffixIconStyle="color: #909399;font-size:22px" />
              </u-form-item>
              <u-form-item label="消防安全责任人" prop="fireDutyName" :borderBottom="true">
                <u-input v-model="form.fireDutyName" placeholder="请输入消防安全责任人" border="none" />
              </u-form-item>
              <u-form-item label="消防安全管理人" prop="fireManageName" :borderBottom="true">
                <u-input v-model="form.fireManageName" placeholder="请输入消防安全管理人" border="none" />
              </u-form-item>
              <u-form-item label="职工人数" prop="employeeNum" :borderBottom="true">
                <u-input type="digit" v-model="form.employeeNum" placeholder="请输入职工人数" suffixIcon="人" suffixIconStyle="color:#999999;font-size:15px" border="none" />
              </u-form-item>
              <u-form-item label="固定资产(万元）" prop="fixedAssets" :borderBottom="true">
                <u-input type="number" v-model="form.fixedAssets" placeholder="请输入固定资产(万元）" suffixIcon="万元" suffixIconStyle="color:#999999;font-size:15px" border="none" />
              </u-form-item>
              <u-form-item label="单位性质" prop="companyNature" :borderBottom="true" @click="handleAction('单位性质')">
                <u-input v-model="form.companyNature" placeholder="请选择单位性质" suffixIcon="arrow-right" suffixIconStyle="color: #909399" border="none" />
              </u-form-item>
              <u-form-item label="单位建筑面积" prop="buildArea" :borderBottom="true">
                <u-input type="number" v-model="form.buildArea" placeholder="请输入单位建筑面积" suffixIcon="平方米" suffixIconStyle="color:#999999;font-size:15px" border="none" />
              </u-form-item>
            </view>
          </view>
        </view>
      </u--form>

      <view style="padding-bottom: 70px"> </view>

      <view style="position: fixed; left: 0; right: 0; bottom: 0; padding: 15px">
        <view>
          <u-button type="primary" style="width: 100%; height: 40px; font-size: 14px" @click="handleSubmit('下一步')" shape="circle"> 下一步 </u-button>
        </view>
      </view>
    </view>

    <view class="centerTwo" v-else>
      <view class="title"> 所在建筑信息（2/2） </view>

      <u--form ref="uForm1" :model="form" :rules="rules" labelWidth="130">
        <view style="padding: 10px 0" v-for="(li, index) in form.baseBuildList" :key="index">
          <view class="" style="padding: 10px 10px 20px 10px; background: #ffffff">
            <view style="display: flex; overflow: hidden">
              <image style="width: 15px; height: 15px; margin: auto 10px auto 0" src="@/static/images/unitInfoCollection/icon1.png" />
              <view style="margin: auto auto auto 0">建筑{{ index + 1 }}</view>
              <u-icon v-if="form.baseBuildList.length > 1" name="trash" color="#FF0000" size="20" style="float: right" @click="deleteSubmit(index)"></u-icon>
            </view>
            <view style="padding-left: 9px">
              <u-form-item label="建筑名称" :prop="`baseBuildList.${index}.buildName`" required :borderBottom="true">
                <u-input v-model="li.buildName" placeholder="请输入建筑名称" border="none" />
              </u-form-item>
              <u-form-item label="建筑地址" :prop="`baseBuildList.${index}.address`" required :borderBottom="true">
                <u-input v-model="li.address" placeholder="请输入建筑地址" border="none" />
              </u-form-item>
              <u-form-item label="建筑结构" prop="li.buildStructure" required :borderBottom="true" @click="handleAction('建筑结构', index)">
                <u-input v-model="li.buildStructure" placeholder="请选择建筑结构" border="none" suffixIcon="arrow-right" suffixIconStyle="color: #909399" />
              </u-form-item>
              <u-form-item label="地上层数" prop="li.aboveFloor" required :borderBottom="true">
                <u-input v-model="li.aboveFloor" placeholder="请输入地上层数" border="none" />
              </u-form-item>
              <u-form-item label="地下层数" prop="li.underFloor" :borderBottom="true">
                <u-input v-model="li.underFloor" placeholder="请输入地下层数" border="none" />
              </u-form-item>
              <u-form-item label="建筑面积" prop="li.buildArea" required :borderBottom="true">
                <u-input v-model="li.buildArea" placeholder="请输入建筑面积" suffixIcon="平方米" suffixIconStyle="color:#999999;font-size:15px" border="none" />
              </u-form-item>
              <u-form-item label="地下空间" prop="li.underSpace" :borderBottom="true">
                <u-input v-model="li.underSpace" placeholder="请输入地下空间面积" suffixIcon="平方米" suffixIconStyle="color:#999999;font-size:15px" border="none" />
              </u-form-item>
              <u-form-item label="使用性质" prop="li.useCharacter" required :borderBottom="true" @click="handleAction('使用性质', index)">
                <u-input v-model="li.useCharacter" placeholder="请选择使用性质" suffixIcon="arrow-right" suffixIconStyle="color: #909399" border="none" />
              </u-form-item>
              <u-form-item label="建成年份" prop="li.completeYear" required :borderBottom="true" @click="handleDateTime('建成年份', index, li.completeYear)">
                <u-input v-model="li.completeYear" placeholder="请选择建成年份" suffixIcon="calendar" suffixIconStyle="color: #909399;font-size:22px" border="none" />
              </u-form-item>
              <u-form-item label="建筑高度" prop="li.buildHigh" required :borderBottom="true">
                <u-input v-model="li.buildHigh" placeholder="请输入建筑高度" suffixIcon="米" suffixIconStyle="color: #909399;font-size:15px" border="none" />
              </u-form-item>
            </view>
          </view>
        </view>
      </u--form>

      <view style="padding-bottom: 70px">
        <u-button type="primary" style="width: 25%; height: 25px; margin-top: 10px" @click="addSubmit" shape="circle" icon="plus" size="mini"> 添加建筑 </u-button>
      </view>

      <view style="position: fixed; left: 0; right: 0; bottom: 0; padding: 15px; background-color: transparent">
        <view style="display: flex">
          <u-button style="width: 50%; height: 40px; font-size: 14px; margin-right: 15px" @click="handleSubmit('上一步')" shape="circle" customStyle="border-color:#3c9cff;color:#3c9cff">
            上一步
          </u-button>

          <u-button type="primary" style="width: 50%; height: 40px; font-size: 14px" @click="handleSubmit('提交')" shape="circle"> 提交 </u-button>
        </view>
      </view>
    </view>

    <u-picker
      :show="actionShow"
      :columns="actionsList"
      :title="'请选择' + actionTitle"
      keyName="name"
      visibleItemCount="6"
      :defaultIndex="[actionIndex]"
      :closeOnClickOverlay="true"
      @close="actionShow = false"
      @cancel="actionShow = false"
      @confirm="selectAction"
    ></u-picker>

    <u-datetime-picker
      :show="showTime"
      v-model="timeValue"
      mode="date"
      @close="showTime = false"
      @cancel="showTime = false"
      @confirm="timeSubmit"
      :closeOnClickOverlay="true"
      :minDate="Number(new Date('1900'))"
      :maxDate="Number(new Date())"
    ></u-datetime-picker>

    <u-modal
      :show="modalShow"
      title="系统提示"
      confirmText="修改"
      cancelText="新增"
      :showCancelButton="true"
      cancelColor="#2979ff"
      @confirm="handleSubmitApi('是')"
      @cancel="handleSubmitApi('否')"
      :closeOnClickOverlay="true"
      @close="modalShow = false"
    >
      <view class="slot-content">
        <view style="text-align: center; margin-bottom: 10px">是否修改单位名称为“{{ newCompanyName }}”的信息？</view>
        <view style="text-align: center; font-size: 13px; color: #ff0000">注：“修改”则点击修改，“新增”将提交一条新的记录，如需“取消”操作可点击空白区域</view>
      </view>
    </u-modal>
  </view>

  <view v-else>
    <view style="display: flex">
      <image style="width: 120px; height: 120px; margin: 50px auto 20px auto" src="@/static/images/unitInfoCollection/success.png" />
    </view>
    <view style="text-align: center; font-weight: 600">提交成功</view>
  </view>
</template>

<script setup>
import { onLoad, onShow, onHide, onLaunch, onReady } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, toRefs, getCurrentInstance } from "vue";
import { getToken } from "@/utils/auth";

import publicStore from "@/store/modules/public.js";

import { companyByNameSelect, addBaseCompany, delBaseBuild } from "@/api/business/mhxf/unitInfoCollection";

const { proxy } = getCurrentInstance();

const newPublicStore = publicStore();

const dataList = reactive({
  form: {
    companyName: "", //单位名称
    organization: "", //信用代码
    delegateName: "", //法人代表姓名
    streetTown: "", //所属街镇
    streetTownValue: 0, //所属街镇
    address: "", //详细地址
    fireManagePhone: "", //消防安全管理人电话
    foundTime: "", //单位成立时间
    fireDutyName: "", //消防安全责任人姓名
    fireManageName: "", //消防安全管理人姓名
    employeeNum: "", //职工人数
    fixedAssets: "", //固定资产（单位：万元）
    companyNature: "", //单位性质
    companyNatureValue: 0, //单位性质
    buildArea: "", //建筑面积

    baseBuildList: [],
  },

  baseBuildListForm: {
    buildName: "", //建筑名称
    address: "", //详细地址
    buildStructure: "", //建筑结构
    buildStructureValue: 0, //建筑结构
    aboveFloor: "", //地上楼层
    underFloor: "", //地下楼层
    buildArea: "", //建筑面积
    underSpace: "", //地下空间
    useCharacter: "", //使用性质
    useCharacterValue: 0,
    completeYear: "", //竣工年份
    buildHigh: "", //建筑高度
  },

  rules: {
    companyName: [
      {
        required: true,
        message: "请输入单位名称",
        trigger: ["blur", "change"],
      },
    ],
    organization: [
      {
        required: true,
        message: "请输入统一社会信用代码",
        trigger: ["blur", "change"],
      },
      {
        type: "string",
        min: 18,
        required: true,
        message: "请输入18位统一社会信用代码",
        trigger: ["change"],
      },
    ],
    delegateName: [
      {
        required: true,
        message: "请输入法人代表",
        trigger: ["blur", "change"],
      },
    ],
    streetTown: [
      {
        required: true,
        message: "请选择所属街镇",
        trigger: ["blur", "change"],
      },
    ],
    address: [
      {
        required: true,
        message: "请输入单位地址",
        trigger: ["blur", "change"],
      },
    ],
    fireManagePhone: [
      {
        required: true,
        message: "请输入消防管理人电话",
        trigger: ["blur", "change"],
      },
      {
        type: "string",
        min: 11,
        required: true,
        message: "请输入正确11位消防管理人电话",
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        trigger: ["blur", "change"],
      },
    ],
    foundTime: [
      {
        required: true,
        message: "请选择成立时间",
        trigger: ["blur", "change"],
      },
    ],

    baseBuildList: [],
  },

  baseBuildListRules: {
    buildName: [
      {
        required: true,
        message: "请输入建筑名称",
        trigger: ["blur", "change"],
      },
    ],

    address: [
      {
        required: true,
        message: "请输入建筑地址",
        trigger: ["blur", "change"],
      },
    ],
  },

  noticeBarText: "注：信息提交后不可修改，提交前请核对填写是否有误",
  pagingBool: true,

  actionIndex: 0,
  actionTitle: "",
  actionShow: false,
  actionsList: [[]],
  showTime: false,
  timeValue: Number(new Date()),
  timeTitle: "",
  timeIndex: 0,

  modalShow: false,
});

const { form, baseBuildListForm, rules, baseBuildListRules, noticeBarText, pagingBool, actionTitle, actionIndex, actionsList, actionShow, showTime, timeValue, timeTitle, timeIndex, modalShow } =
  toRefs(dataList);

const uForm = ref(null);
const uForm1 = ref(null);
const newCompanyName = ref("");
const successBool = ref(false);

/**
 * @单位名称
 * @icon图标按钮点击事件
 */
function companySubmit(e) {
  actionsList.value = [[]];

  companyByNameSelect({
    companyName: e,
  }).then((res) => {
    if (res.status == "SUCCESS") {
      if (res.data.length > 0) {
        actionShow.value = true;
        res.data.forEach((el) => {
          el.name = el.companyName;
          actionsList.value[0].push(el);
        });
        actionTitle.value = "单位名称";
      } else {
        proxy.$modal.msg("未匹配到您所输入的单位！");
      }
    }
  });
}

/**
 * @上一步
 * @下一步
 * @提交
 * @按钮点击事件
 */
function handleSubmit(value) {
  if (value === "上一步") {
    pagingBool.value = true;
  } else if (value === "下一步") {
    uForm.value
      .validate()
      .then((res) => {
        uni.$u.toast("校验通过");
        pagingBool.value = false;
      })
      .catch((errors) => {
        uni.$u.toast("校验失败");
      });
  } else if (value === "提交") {
    if (newCompanyName.value == "") {
      handleSubmitApi("否");
    } else {
      modalShow.value = true;
    }
  }
}

/**
 * @api提交
 */
function handleSubmitApi(value) {
  console.log(form.value);

  let param = {};

  uForm1.value
    .validate()
    .then((res) => {
      uni.$u.toast("校验通过");

      param = {
        baseCompany: {
          companyName: form.value.companyName, //单位名称
          organization: form.value.organization, //组织机构代码
          address: form.value.address, //单位地址
          foundTime: form.value.foundTime + "T00:00:00", //成立时间
          companyNature: form.value.companyNature, //单位性质
        },
        baseCompanyAttach1: {
          employeeNum: form.value.employeeNum, //职工人数
          buildArea: form.value.buildArea, //建筑面积
          fixedAssets: form.value.fixedAssets, //固定资产
        },
        baseCompanyPerson: {
          delegateName: form.value.delegateName, //法人代表姓名
          fireDutyName: form.value.fireDutyName, //消防安全责任人姓名
          fireManageName: form.value.fireManageName, //消防安全管理人姓名
          fireManagePhone: form.value.fireManagePhone, //消防安全管理人电话
        },
        baseBuildList: [],
      };

      if (value === "是") {
        param.baseCompany.id = "id" in form.value ? form.value.id : undefined; //主键ID
        param.baseCompany.companyId = "companyId" in form.value ? form.value.companyId : undefined; //单位ID

        param.baseCompanyAttach1.id = "id1" in form.value ? form.value.id1 : undefined; //附表ID(id1)

        param.baseCompanyPerson.id = "id2" in form.value ? form.value.id2 : undefined; //单位关联人员表ID（id2）
      }

      form.value.baseBuildList.forEach((el, ind) => {
        param.baseBuildList.push({
          buildName: el.buildName, //建筑名称
          address: el.address, //详细地址
          buildStructure: el.buildStructureValue, //建筑结构
          aboveFloor: el.aboveFloor, //地上楼层
          underFloor: el.underFloor, //地下楼层
          buildArea: el.buildArea, //建筑面积
          underSpace: el.underSpace, //地下空间
          useCharacter: el.useCharacterValue, //使用性质
          completeYear: el.completeYear, //竣工年份
          buildHigh: el.buildHigh, //建筑高度
        });

        if (value === "是") {
          if ("id" in el) {
            param.baseBuildList[ind].id = el.id;
          }
        }
      });

      addBaseCompany(param).then((res) => {
        if (res.status == "SUCCESS") {
          if (getToken()) {
            uni.showToast({
              title: "提交成功",
            });
            setTimeout(() => {
              proxy.$tab.reLaunch("/pages/index");
            }, 2000);
          } else {
            successBool.value = true;
          }
        }
      });
    })
    .catch((errors) => {
      uni.$u.toast("校验失败");
    });
}

/**
 * @action弹出框点击事件
 */
function handleAction(value, index) {
  actionShow.value = true;

  if (value == "建筑结构") {
    actionsList.value = [
      [
        {
          value: 2,
          name: "钢筋混凝土",
        },
        {
          value: 1,
          name: "砖混结构",
        },
        {
          value: 3,
          name: "钢结构",
        },
        {
          value: 4,
          name: "大型钢筋混凝土",
        },
        {
          value: 5,
          name: "木质结构",
        },
        {
          value: 6,
          name: "砖木结构",
        },
      ],
    ];
    actionTitle.value = "建筑结构";
    actionIndex.value = index;
  }

  if (value == "使用性质") {
    actionsList.value = [
      [
        {
          value: 1,
          name: "饭店、旅馆",
        },
        {
          value: 2,
          name: "公寓、住宅",
        },
        {
          value: 3,
          name: "体育场馆",
        },
        {
          value: 4,
          name: "俱乐部、夜总会、歌舞厅电影院、剧院、礼堂办公、商务科研 (包括实验室等)",
        },
        {
          value: 5,
          name: "医院",
        },
        {
          value: 6,
          name: "教学",
        },
        {
          value: 7,
          name: "商业 (包括商店、商场、集贸市场等)",
        },
        {
          value: 8,
          name: "金融",
        },
        {
          value: 9,
          name: "交通",
        },

        {
          value: 10,
          name: "文博馆(包括展览馆、博物馆、图书馆、档案馆、文化馆等)",
        },
        {
          value: 11,
          name: "通信枢纽、电视广播发射、中转",
        },

        {
          value: 12,
          name: "厂房",
        },
        {
          value: 13,
          name: "库房",
        },
        {
          value: 14,
          name: "油气罐站、管线",
        },
        {
          value: 15,
          name: "综台建筑",
        },
        {
          value: 16,
          name: "其他",
        },
      ],
    ];
    actionTitle.value = "使用性质";
    actionIndex.value = index;
  }

  if (value == "单位性质") {
    actionsList.value = [
      [
        {
          value: 1,
          name: "机关",
        },
        {
          value: 2,
          name: "团体",
        },
        {
          value: 3,
          name: "企业",
        },
        {
          value: 4,
          name: "事业",
        },
        {
          value: 5,
          name: "其他",
        },
      ],
    ];
    actionTitle.value = "单位性质";
  }

  if (value == "所属街镇") {
    actionsList.value = [
      [
        {
          name: "江川路街道",
          value: 1201,
          x: 121.399126538181,
          y: 31.0099719391863,
        },
        {
          name: "新虹街道",
          value: 1217,
          x: 121.319329296294,
          y: 31.1983901916889,
        },
        {
          name: "古美路街道",
          value: 1206,
          x: 121.388451866936,
          y: 31.1478233480159,
        },
        {
          name: "浦锦街道",
          value: 1218,
          x: 121.483929120352,
          y: 31.089967318558,
        },
        {
          name: "浦江镇",
          value: 1215,
          x: 121.524058543447,
          y: 31.0540039472667,
        },
        {
          name: "吴泾镇",
          value: 1213,
          x: 121.454076463728,
          y: 31.04860402113,
        },
        {
          name: "马桥镇",
          value: 1214,
          x: 121.352680027718,
          y: 31.0213512298508,
        },
        {
          name: "颛桥镇",
          value: 1209,
          x: 121.40607138504,
          y: 31.0612972443508,
        },
        {
          name: "莘庄镇",
          value: 1207,
          x: 121.37064864047,
          y: 31.1154549548722,
        },
        {
          name: "梅陇镇",
          value: 1212,
          x: 121.421346814491,
          y: 31.1069718313722,
        },
        {
          name: "七宝镇",
          value: 1208,
          x: 121.350366186317,
          y: 31.1553292680362,
        },
        {
          name: "虹桥镇",
          value: 1211,
          x: 121.37956256207,
          y: 31.1806219953212,
        },
        {
          name: "华漕镇",
          value: 1210,
          x: 121.277541517147,
          y: 31.2289121171624,
        },
        {
          name: "莘庄工业区",
          value: 1216,
          x: 121.376508452784,
          y: 31.0678185611843,
        },
      ],
    ];
    actionTitle.value = "所属街镇";
  }
}

/**
 * @action弹出框选择事件
 */
function selectAction(e) {
  if (actionTitle.value == "建筑结构") {
    form.value.baseBuildList[actionIndex.value].buildStructure = e.value[0].name;
    form.value.baseBuildList[actionIndex.value].buildStructureValue = e.value[0].value;
  }

  if (actionTitle.value == "使用性质") {
    form.value.baseBuildList[actionIndex.value].useCharacter = e.value[0].name;
    form.value.baseBuildList[actionIndex.value].useCharacterValue = e.value[0].value;
  }

  if (actionTitle.value == "单位性质") {
    form.value.companyNature = e.value[0].name;
    form.value.companyNatureValue = e.value[0].value;
  }

  if (actionTitle.value == "所属街镇") {
    form.value.streetTown = e.value[0].name;
    form.value.streetTownValue = e.value[0].value;
  }

  if (actionTitle.value == "单位名称") {
    form.value.baseBuildList = [];

    newCompanyName.value = e.value[0].companyName;
    // form.value = e.value[0];
    form.value.id = e.value[0].id;
    form.value.id1 = e.value[0].id1;
    form.value.id2 = e.value[0].id2;
    form.value.companyId = e.value[0].companyId;

    form.value.companyName = e.value[0].companyName;
    form.value.organization = e.value[0].organization;
    form.value.delegateName = e.value[0].delegateName;
    form.value.address = e.value[0].address;
    form.value.foundTime = e.value[0].foundTime.split("T")[0];

    if (e.value[0].baseBuildList != null) {
      form.value.baseBuildList = e.value[0].baseBuildList;
    } else {
      form.value.baseBuildList.push(baseBuildListForm.value);
    }

    form.value.baseBuildList.forEach((el) => {
      el.buildStructureValue = el.buildStructure;

      el.buildStructure =
        el.buildStructure == 1
          ? "砖混结构"
          : el.buildStructure == 2
          ? "钢筋混凝土"
          : el.buildStructure == 3
          ? "钢结构"
          : el.buildStructure == 4
          ? "大型钢筋混凝土"
          : el.buildStructure == 5
          ? "木质结构"
          : el.buildStructure == 6
          ? "砖木结构"
          : "未知";

      el.useCharacterValue = el.useCharacter;

      el.useCharacter =
        el.useCharacter == 1
          ? "饭店、旅馆"
          : el.useCharacter == 2
          ? "公寓、住宅"
          : el.useCharacter == 3
          ? "体育场馆"
          : el.useCharacter == 4
          ? "俱乐部、夜总会、歌舞厅电影院、剧院、礼堂办公、商务科研 (包括实验室等)"
          : el.useCharacter == 5
          ? "医院"
          : el.useCharacter == 6
          ? "教学"
          : el.useCharacter == 7
          ? "商业 (包括商店、商场、集贸市场等)"
          : el.useCharacter == 8
          ? "金融"
          : el.useCharacter == 9
          ? "交通"
          : el.useCharacter == 10
          ? "文博馆(包括展览馆、博物馆、图书馆、档案馆、文化馆等)"
          : el.useCharacter == 11
          ? "通信枢纽、电视广播发射、中转"
          : el.useCharacter == 12
          ? "厂房"
          : el.useCharacter == 13
          ? "库房"
          : el.useCharacter == 14
          ? "油气罐站、管线"
          : el.useCharacter == 15
          ? "综台建筑"
          : el.useCharacter == 16
          ? "其他"
          : "未知";
    });
  }

  actionShow.value = false;
}

/**
 * @时间弹出框点击事件
 */
function handleDateTime(value, index, time) {
  showTime.value = true;
  if (value == "成立时间") {
    timeValue.value = time ? Number(new Date(time)) : Number(new Date());
    timeIndex.value = index;
    timeTitle.value = "成立时间";
  } else if (value == "建成年份") {
    timeValue.value = time ? Number(new Date(time)) : Number(new Date());
    timeIndex.value = index;
    timeTitle.value = "建成年份";
  }
}

/**
 * @时间选择器
 * @确定按钮事件
 */
function timeSubmit(data) {
  let time = newPublicStore.formatterDate(data.value);
  let timeData = time.split(" ")[0];
  if (timeTitle.value == "成立时间") {
    form.value.foundTime = timeData;
  } else if (timeTitle.value == "建成年份") {
    form.value.baseBuildList[timeIndex.value].completeYear = timeData;
  }
  showTime.value = false;
}

/**
 * @添加建筑
 * @按钮点击事件
 */
function addSubmit() {
  form.value.baseBuildList.push(baseBuildListForm.value);
  rules.value.baseBuildList.push(baseBuildListRules.value);
}

/**
 * @删除建筑
 * @按钮点击事件
 */
function deleteSubmit(index) {
  if ("id" in form.value.baseBuildList[index]) {
    delBaseBuild(form.value.baseBuildList[index].id).then((res) => {
      if (res.status == "SUCCESS") {
        form.value.baseBuildList.splice(index, 1);
      }
    });
  } else {
    form.value.baseBuildList.splice(index, 1);
  }

  rules.value.baseBuildList.splice(index, 1);
}

onLoad((options) => {
  form.value.baseBuildList = [];
  rules.value.baseBuildList = [];

  form.value.baseBuildList.push(baseBuildListForm.value);
  rules.value.baseBuildList.push(baseBuildListRules.value);

  if (!getToken()) {
    document.getElementsByClassName("uni-page-head-hd")[0].style.cssText = "display: none;";
  }
});
</script>

<style lang="scss">
#unitInfoCollection {
  .centerOne,
  .centerTwo {
    .title {
      color: #333333;
      text-align: center;
      margin-top: 10px;
    }
  }
}
</style>