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

<template>
  <oa-scroll
    customClass="scroll-height"
    :isSticky="false"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="bg-white p15">
        <u-form ref="uForm" 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>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onReady, onLoad, onShow } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores, xunJianStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const xunJianStore = xunJianStores(); //全局变量值Store
/*----------------------------------变量声明-----------------------------------*/
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() {
  proxy.$refs["uForm"]
    .validate()
    .then((res) => {
      let endTime = new Date();
      model.siteTime = proxy.$time.formatterDate(endTime, "yyyy-MM-dd hh:mm:ss");

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

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

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});
</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>