usky-web-mobile/src/pages/business/fireIot/facilitiesGather/index.vue

<template>
  <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
    <view id="facilitiesGather" v-if="!successBool">
      <view class="centerOne">
        <!-- <view class="title"> </view> -->

        <u--form :model="form" ref="uForm" :rules="rules" labelWidth="90">
          <view>
            <view style="padding: 10px 10px 20px 10px; background: #ffffff">
              <view style="padding-left: 9px">
                <u-form-item label="所属部门" prop="department" :borderBottom="true" @click="handleAction('所属部门')" required>
                  <u-input v-model="form.department" placeholder="请选择所属部门" suffixIcon="arrow-right" suffixIconStyle="color: #909399" border="none" disabledColor="transparent" disabled />
                </u-form-item>
                <u-form-item label="设施类型" prop="facilityTypeName" :borderBottom="true" @click="handleAction('设施类型')" required>
                  <u-input v-model="form.facilityTypeName" placeholder="请选择设施类型" suffixIcon="arrow-right" suffixIconStyle="color: #909399" border="none" disabledColor="transparent" disabled />
                </u-form-item>
                <u-form-item label="设施名称" prop="facilityName" :borderBottom="true" required>
                  <u-input v-model="form.facilityName" placeholder="请输入设施名称" border="none" />
                </u-form-item>
                <u-form-item label="状态" prop="status" :borderBottom="true" required>
                  <u-radio-group v-model="form.status" placement="row">
                    <u-radio v-for="se in sexList" :key="se" :activeColor="proxy.$settingStore.themeColor.color" :label="se.text" :name="se.value" style="margin-right: 15px"></u-radio>
                  </u-radio-group>
                </u-form-item>
                <u-form-item label="设施地址" prop="address" :borderBottom="true" @click="handleAction('设施地址')" required>
                  <u-input v-model="form.address" placeholder="请选择设施地址" border="none" disabledColor="transparent" disabled>
                    <template #suffix>
                      <view class="iconfont ucicon-map menu-icon" style="font-size: 18px; color: #909399"> </view>
                    </template>
                  </u-input>
                </u-form-item>
                <u-form-item label="行政区划" prop="facilityAddress" :borderBottom="true" required>
                  <view>
                    <u-input v-model="form.address" placeholder="" border="none" disabledColor="transparent" disabled />
                    <u-input v-model="form.facilityAddress" placeholder="请输入详细地址" border="none" />
                  </view>
                </u-form-item>
                <u-form-item v-if="!form.typeGuise == 1" label="类型" prop="gpsAreas" :borderBottom="true" @click="handleAction('类型')" required>
                  <view>{{ form.typeGuise == 1 ? "点" : form.typeGuise == 2 ? "线" : form.typeGuise == 3 ? "面" : "" }}</view>
                  <view v-if="!form.gpsAreas" style="margin: auto; color: #ff0000">未编辑</view>
                  <view v-if="form.gpsAreas" style="margin: auto; color: #30bb00">已编辑</view>
                  <view class="iconfont ucicon-bianji1 menu-icon" style="font-size: 14px; color: #909399"> </view>
                </u-form-item>
                <u-form-item label="联系人" prop="contact" :borderBottom="true" required>
                  <u-input v-model="form.contact" placeholder="请输入联系人" border="none" />
                </u-form-item>
                <u-form-item label="联系电话" prop="contactPhone" required :borderBottom="true">
                  <u-input v-model="form.contactPhone" placeholder="请输入联系电话" border="none" maxlength="11" />
                </u-form-item>
                <u-form-item label="设备图片" prop="imagesUrl" required :borderBottom="true">
                  <view class="flex flex-wrap">
                    <view class="uploadView" style="width: 110px; margin-bottom: 0px" v-if="form.imagesUrl">
                      <view class="uploadUimage">
                        <u-image width="100%" height="100%" :src="form.imagesUrl"></u-image>
                      </view>

                      <view class="uploadViewClose" @click="uploadViewClose()">
                        <u-icon name="close" color="#ffffff" size="12"></u-icon>
                      </view>
                    </view>
                    <view :class="'uploadView upload-buttom'" style="width: 110px; margin-bottom: 0px" v-if="!form.imagesUrl" @click="uploadClick">
                      <u-icon style="margin: auto" name="plus" color="#909399" size="28"></u-icon>
                    </view>
                  </view>
                </u-form-item>
                <u-form-item label="备注" prop="facilityDesc" required :borderBottom="true">
                  <u-textarea v-model="form.facilityDesc" placeholder="请输入" border="none" maxlength="30" style="padding: 0px"></u-textarea>
                </u-form-item>

                <u-form-item v-for="(fo, index) in form.extendData" :key="index" :label="fo.name" :prop="fo.key" :borderBottom="true">
                  <u-input v-if="fo.type === 'SRK'" v-model="fo.value" :placeholder="'请输入' + fo.name" border="none" disabledColor="transparent" />

                  <u-radio-group v-if="fo.type === 'DXK'" v-model="fo.value" placement="row">
                    <u-radio
                      v-for="se in fo.list"
                      :key="se"
                      :activeColor="proxy.$settingStore.themeColor.color"
                      :label="se.attributeValue"
                      :name="se.attributeCode"
                      style="margin-right: 15px"
                    ></u-radio>
                  </u-radio-group>

                  <uni-data-select v-if="fo.type === 'XLK'" v-model="fo.value" :placeholder="'请选择' + fo.name" :localdata="fo.list"></uni-data-select>
                </u-form-item>
              </view>
            </view>
          </view>
        </u--form>

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

        <view class="app-button-fixed">
          <view class="app-flex">
            <u-button class="app-buttom" style="margin-right: 15px" @click="handleSubmit('取消')" shape="circle"> 取消 </u-button>

            <u-button class="app-buttom" type="primary" @click="handleSubmit('提交')" shape="circle"> 提交 </u-button>
          </view>
        </view>
      </view>

      <u-picker
        :show="actionShow"
        :columns="actionsList"
        :title="'请选择' + actionTitle"
        keyName="name"
        visibleItemCount="6"
        :defaultIndex="[actionDefaultIndex]"
        :closeOnClickOverlay="true"
        @close="actionShow = false"
        @cancel="actionShow = false"
        @confirm="selectAction"
        @change="changeHandler"
      ></u-picker>
    </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>
  </scroll-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 { publicStores, useStores } from "@/store/modules/index";

import { typeSelect, add, uploadAvatar, treeselect } from "@/api/business/fireIot/facilitiesGather/index";

const { proxy } = getCurrentInstance();

const publicStore = publicStores();

//设施类型下拉数据存储
const typeSelectList = ref([[]]);
//部门下拉数据存储
const treeselectList = ref([[]]);
const childrenList1 = ref([[]]);

const dataList = reactive({
  sexList: [
    {
      text: "正常",
      value: "0",
    },
    {
      text: "维修",
      value: "1",
    },
    {
      text: "关闭",
      value: "2",
    },
  ],

  form: {
    department: "", //所属部门
    facilityType: "", //设施类型
    facilityTypeName: "", //设施类型名称
    facilityName: "", //设施名称
    status: "0", //设施状态
    address: "", //设施地址
    longitude: "", //经度
    latitude: "", //纬度
    province: "", //省
    city: "", //市
    area: "", //区（县）
    facilityAddress: "", //详细地址
    streetTown: null, //所属街镇
    gpsAreas: "", //经纬度集合
    contact: "", //联系人
    contactPhone: "", //联系方式
    imagesUrl: "", //图⽚地址URL
    facilityDesc: "", //备注
    extendData: [], //扩展属性
    recordPictureList: [],
    typeGuise: undefined, //点线面类型
  },

  rules: {
    department: [
      {
        required: false,
        message: "请选择所属部门",
        trigger: ["blur", "change"],
      },
    ],
    facilityTypeName: [
      {
        required: true,
        message: "请选择设施类型",
        trigger: ["blur", "change"],
      },
    ],
    facilityName: [
      {
        required: true,
        message: "请输入设施名称",
        trigger: ["blur", "change"],
      },
    ],
    status: [
      {
        required: true,
        message: "请选择设施状态",
        trigger: ["blur", "change"],
      },
    ],
    address: [
      {
        required: false,
        message: "请选择设施地址",
        trigger: ["blur", "change"],
      },
    ],
    facilityAddress: [
      {
        required: true,
        message: "请输入详细地址",
        trigger: ["blur", "change"],
      },
    ],
    contact: [
      {
        required: true,
        message: "请输入联系人",
        trigger: ["blur", "change"],
      },
    ],
    contactPhone: [
      {
        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"],
      },
    ],
    imagesUrl: [
      {
        required: true,
        message: "请选择图片",
        trigger: ["blur", "change"],
      },
    ],
    facilityDesc: [
      {
        required: true,
        message: "请输入备注",
        trigger: ["blur", "change"],
      },
    ],
  },

  actionIndex: 0,
  actionIndex1: 0,
  actionTitle: "",
  actionShow: false,
  actionDefaultIndex: 0,
  actionsList: [[]],
});

const { sexList, form, rules, actionIndex, actionIndex1, actionTitle, actionShow, actionDefaultIndex, actionsList } = toRefs(dataList);

const uForm = ref(null);
const successBool = ref(false);

/**
 * @api提交
 */
function handleSubmit(type) {
  let param = {};

  if (type == "提交") {
    uForm.value
      .validate()
      .then((res) => {
        uni.$u.toast("校验通过");

        param = {
          facilityType: form.value.facilityType,
          facilityName: form.value.facilityName,
          status: form.value.status, //设施状态
          address: "徐乐路208号", //设施地址
          longitude: "121.3632126", //经度
          latitude: "30.98168041", //纬度
          province: "", //省
          city: "", //市
          area: "", //区（县）
          facilityAddress: form.value.facilityAddress, //详细地址
          gpsAreas: "", //经纬度集合
          contact: form.value.contact, //联系人
          contactPhone: form.value.contactPhone, //联系方式
          imagesUrl: form.value.imagesUrl, //图⽚地址URL
          facilityDesc: form.value.facilityDesc, //备注
        };

        form.value.extendData.forEach((el) => {
          param.extendData.push({ key: el.key, value: el.value });
        });

        add(param).then((requset) => {});
      })
      .catch((errors) => {
        uni.$u.toast("校验失败");
      });
  } else {
    proxy.$tab.navigateBack();
  }
}

/**
 * @action弹出框点击事件
 */
function handleAction(value, index, index1) {
  actionsList.value = [[]];

  if (value == "所属部门") {
    actionTitle.value = "所属部门";
    actionsList.value = treeselectList.value;

    treeselectList.value[0].forEach((el, ind) => {
      if (el.name === form.value.department) {
        actionDefaultIndex.value = ind;
      }
    });
  }

  if (value == "设施类型") {
    actionTitle.value = "设施类型";
    actionsList.value = typeSelectList.value;

    typeSelectList.value[0].forEach((el, ind) => {
      if (el.name === form.value.facilityTypeName) {
        actionDefaultIndex.value = ind;
      }
    });
  }

  if (value == "设施地址") {
    proxy.$tab.navigateTo("/pages/business/fireIot/facilitiesGather/mapGather");
    return;
  }

  if (value == "类型") {
    return;
  }

  actionShow.value = true;
}

/**
 * @action弹出框选择事件
 */
function selectAction(e) {
  console.log(e);

  if (actionTitle.value == "设施类型") {
    form.value.facilityType = e.value[0].value;
    form.value.facilityTypeName = e.value[0].name;
    form.value.typeGuise = e.value[0].typeGuise;

    if (e.value[0].dataField) {
      form.value.extendData = e.value[0].dataField;

      form.value.extendData.forEach((el) => {
        if (el.type === "XLK") {
          if (el.list) {
            el.list.forEach((e) => {
              e.value = e.attributeCode;
              e.text = e.attributeValue;
            });
          }
        }
      });
    } else {
      form.value.extendData = [];
    }
  }

  // if (actionTitle.value == "灭火器") {
  //   form.value.baseBuildList[actionIndex.value].baseBuildExtinguishList[actionIndex1.value].extinguishType = e.value[0].name;
  //   form.value.baseBuildList[actionIndex.value].baseBuildExtinguishList[actionIndex1.value].extinguishTypeValue = e.value[0].value;
  // }

  actionShow.value = false;
}

/**
 * @action弹出框change事件
 */
function changeHandler(e) {
  const uPicker = ref(null);
  const {
    columnIndex,
    value,
    values, // values为当前变化列的数组内容
    index,
    // 微信小程序无法将picker实例传出来，只能通过ref操作
    picker = uPicker.value,
  } = e;
  // 当第一列值发生变化时，变化第二列(后一列)对应的选项

  console.log(columnIndex, index);

  if (columnIndex === 0) {
    // picker为选择器this实例，变化第二列对应的选项
    picker.setColumnValues(1, columnData[index]);
  }
}

/**
 * @upload图片上传
 * @点击事件
 */
function uploadClick() {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择、摄像头
    success: function (res) {
      uploadApi(res);
    },
  });
}

/**
 * @upload图片上传
 * @api接口请求
 */
function uploadApi(res) {
  let data = { name: "file", filePath: res.tempFilePaths[0] };

  uploadAvatar(data).then((response) => {
    form.value.imagesUrl = response.data.url;
  });
}

/**
 * @upload图片上传
 * @点击事件
 * @删除事件
 */
function uploadViewClose(el) {
  form.value.imagesUrl = "";
}

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

  typeSelect({ id: "" }).then((requset) => {
    if (requset.status === "SUCCESS") {
      requset.data.forEach((el) => {
        typeSelectList.value[0].push({ name: el.typeName, value: el.id, typeGuise: el.typeGuise, dataField: el.dataField ? JSON.parse(el.dataField) : [] });
      });
    }
  });

  treeselect({}).then((requset) => {
    if (requset.status === "SUCCESS") {
      console.log(requset.data);
      requset.data.forEach((el) => {
        treeselectList.value[0].push({ name: el.label, value: el.id, children: el.children });
      });

      var data = [
        {
          id: 124,
          label: "公司",
          children: [
            {
              id: 125,
              label: "it",
              children: [
                {
                  id: 126,
                  label: "二组",
                },
              ],
            },
          ],
        },
        {
          id: 124,
          label: "公司",
          children: [
            {
              id: 125,
              label: "it1",
              children: [
                {
                  id: 126,
                  label: "1组",
                },
              ],
            },
          ],
        },
        {
          id: 124,
          label: "公司",
          children: [
            {
              id: 125,
              label: "it2",
              children: [
                {
                  id: 126,
                  label: "3组",
                },
              ],
            },
          ],
        },
      ];

      data.forEach((el) => {
        treeselectList.value[0].push({ name: el.label, value: el.id, children: el.children });
      });
    }
  });
});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});
</script>

<style lang="scss">
#facilitiesGather {
  .centerOne,
  .centerTwo {
    .title {
      color: #333333;
      text-align: center;
    }
  }

  :deep(.u-picker__view__column__item) {
    font-size: 13px;
  }

  :deep(.uni-select) {
    padding-left: 0;
    border: 0;
    font-size: 15px;
  }

  :deep(.uni-select__input-placeholder) {
    font-size: 15px;
    color: rgb(192, 196, 204);
  }

  :deep(.uni-select--mask) {
    position: relative;
  }
}
</style>