pubilc_basic/src/views/activitys/times/detail.vue

<template>
  <div id="detail">
    <van-row>
      <van-col span="24" class="main animate__animated animate__backInRight">
        <van-col span="24" class="one">
          <van-form @submit="toSave" label-width="auto">
            <van-cell-group>
              <van-field
                v-model="form.name"
                name="name"
                type="textarea"
                rows="1"
                autosize
                label="标题"
                placeholder="请输入标题"
                :rules="[{ required: true, message: '请输入标题' }]"
              />
              <van-field v-model="form.year" is-link readonly name="year" label="年份" placeholder="点击选择年份" @click="toPopup({ type: 'year' })" />
              <van-field
                v-model="form.start_time"
                is-link
                readonly
                name="start_time"
                label="开始时间"
                placeholder="点击选择年份"
                @click="toPopup({ type: 'start_time' })"
              />
              <van-field
                v-model="form.end_time"
                is-link
                readonly
                name="end_time"
                label="结束时间"
                placeholder="点击选择时间"
                @click="toPopup({ type: 'end_time' })"
              />
              <van-field
                v-model="form.type"
                is-link
                readonly
                name="type"
                label="开放的实验室类型"
                placeholder="点击选择类型"
                @click="toPopup({ type: 'type' })"
              />
              <van-field v-model="form.is_use" is-link readonly name="is_use" label="是否启用" placeholder="点击选择" @click="toPopup({ type: 'is_use' })" />
            </van-cell-group>
            <div class="btn">
              <van-button type="primary" size="small" native-type="submit"> 提交保存 </van-button>
            </div>
          </van-form>
        </van-col>
      </van-col>
    </van-row>
    <van-popup v-model:show="popup.show" position="bottom">
      <template v-if="popup.type == 'year'">
        <van-date-picker :columns-type="['year']" @confirm="popChange" @cancel="toCancel" />
      </template>
      <template v-else-if="popup.type == 'start_time'">
        <van-date-picker :columns-type="['year', 'month', 'day']" @confirm="popChange" @cancel="toCancel" />
      </template>
      <template v-else-if="popup.type == 'end_time'">
        <van-date-picker :columns-type="['year', 'month', 'day']" @confirm="popChange" @cancel="toCancel" />
      </template>
      <template v-else-if="popup.type == 'type'">
        <van-picker :columns="typeList" :columns-field-names="{ text: 'dict_label', value: 'dict_value' }" @confirm="popChange" @cancel="toCancel" />
      </template>
      <template v-else-if="popup.type == 'is_use'">
        <van-picker :columns="showList" :columns-field-names="{ text: 'dict_label', value: 'dict_value' }" @confirm="popChange" @cancel="toCancel" />
      </template>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { showToast } from 'vant';
// 接口
import { ActivitysStore } from '@common/src/stores/basic/activitys';
import { DictDataStore } from '@common/src/stores/users/sysdictdata'; // 字典表
import type { IQueryResult } from '@/util/types.util';
const actAxios = ActivitysStore();
const dictAxios = DictDataStore();

// 路由
const route = useRoute();

const id: Ref<any> = ref('');
// 表单
const form: Ref<any> = ref({ file: [], files: [] });

// 弹框
const popup: Ref<any> = ref({ show: false, type: '' });
// 日期
const minDate: Ref<any> = ref(new Date(2020, 1, 1));
const maxDate: Ref<any> = ref(new Date(2030, 1, 1));
// 字典表
const showList: Ref<any> = ref([]);
const typeList: Ref<any> = ref([]);
// 请求
onMounted(async () => {
  id.value = route.query.id;
  await searchOther();
  await search();
});
const search = async () => {
  if (id.value) {
    let res: IQueryResult = await actAxios.fetch(id.value);
    if (res.errcode == '0') {
      form.value = res.data;
    }
  }
};
// 选择
const toPopup = (e) => {
  popup.value = { show: true, type: e.type };
};
const popChange = (e) => {
  let value = e.selectedValues;
  if (popup.value.type == 'year') {
    form.value.year = value[0];
  } else if (popup.value.type == 'start_time') {
    form.value.start_time = value.join('-');
  } else if (popup.value.type == 'end_time') {
    form.value.end_time = value.join('-');
  } else if (popup.value.type == 'type') {
    form.value.type = value[0];
  } else if (popup.value.type == 'is_use') {
    form.value.is_use = value[0];
  }
  toCancel();
};
// 关闭
const toCancel = () => {
  popup.value = { show: false };
};

// 保存
const toSave = async (e) => {
  let res: IQueryResult;
  if (id.value) res = await actAxios.update({ ...e, _id: id.value });
  else res = await actAxios.create(e);
  if (res.errcode == '0') {
    showToast({ message: '信息删除成功', type: 'success', duration: 500 });
    toBack();
  } else {
    showToast({ message: `${res.errmsg}`, type: 'fail', duration: 500 });
  }
};
// 查询其他信息
const searchOther = async () => {
  let res: IQueryResult;
  // 是否启用
  res = await dictAxios.query({ dict_type: 'act_time_type' });
  if (res.errcode == '0') {
    showList.value = res.data;
  }
  // 类型
  res = await dictAxios.query({ dict_type: 'act_label_type' });
  if (res.errcode == '0') {
    typeList.value = res.data;
  }
};
// 返回;
const toBack = () => {
  window.history.go(-1);
};
</script>
<style scoped lang="scss">
.main {
  .one {
    .btn {
      text-align: center;
      margin: 10px 0;
    }
  }
}
</style>