usky-web-mobile/src/pages/business/mhxf/xunJian/collect/components/collectDetail.vue

<template>
  <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
    <view class="bg-white p15">
      <u-form ref="form" labelPosition="left" :model="model" :rules="rules" labelWidth="82">
        <u-form-item label="地点号码：" prop="siteNubmber">
          <u-input v-model="model.siteNubmber" disabled></u-input>
        </u-form-item>
        <u-form-item label="地点名称：" prop="siteName">
          <u-input v-model="model.siteName"></u-input>
        </u-form-item>
        <u-form-item label="备注：" prop="siteDescribe">
          <u-input v-model="model.siteDescribe"></u-input>
        </u-form-item>
      </u-form>

      <u-button type="primary" class="mt15" style="width: 100%; height: 40px; font-size: 14px" @click="handleInsert()" shape="circle"> 保存 </u-button>
    </view>
  </scroll-view>
</template>

<script setup>
import {
  onReady,
  onLoad,
  onShow,
  onPullDownRefresh, //下拉刷新
  onReachBottom, // 上拉加载
  onNavigationBarButtonTap,
} from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";
import { useStores, commonStores, xunJianStores } from "@/store/modules/index";

const commonStore = commonStores(); //全局公共Store
const xunJianStore = xunJianStores(); //全局变量值Store

const { proxy } = getCurrentInstance();

const form = ref(null); //表单refs获取
const model = reactive({
  siteType: 1,
  siteTime: "",
  swipeBool: false,
  siteName: "",
  siteNubmber: "",
  siteDescribe: "",
}); //form表单数据定义
const rules = ref({
  siteName: {
    type: "string",
    required: true,
    message: "地点名称不能为空",
    trigger: ["blur", "change"],
  },

  siteNubmber: [{ required: true, message: "地点编号不能为空", trigger: "blur" }],

  siteDescribe: [{ min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }],
}); //form表单校验

/**
 * @保存按钮点击事件
 */
function handleInsert() {
  form.value
    .validate()
    .then((res) => {
      let endTime = new Date();
      model.siteTime = commonStore.formatterDate(endTime, "yyyy-MM-dd hh:mm:ss");

      xunJianStore.collectDataList.push(model);
      uni.navigateBack({
        delta: 1, //返回到需要执行方法的页面
      });
    })
    .catch((errors) => {
      uni.$u.toast("校验失败");
    });
}

onLoad((options) => {
  model.siteType = options.siteType;
  model.siteNubmber = options.siteNubmber;
});

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

onMounted(() => {});
</script>

<style lang="scss">
.is-selected {
  color: #1989fa;
}
</style>

<style scoped>
.reportCenter {
}

.reportCenter .centerSiteName {
  font-size: 15px;
  margin-bottom: 5px;
  height: 20px;
  line-height: 20px;
  display: flex;
}

.reportRight {
  display: flex;
  padding: 0 15px;
}
</style>