usky-web-mobile/src/pages/business/oa/approval/components/qjd.vue

<template>
  <oa-scroll
    customClass="unitInfoCollection-container scroll-height"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="centerOne">
        <u--form ref="uForm" :model="form" :rules="rules" labelWidth="130">
          <view style="padding: 0px 10px 0px 10px; background: #ffffff">
            <view style="padding-left: 9px">
              <u-form-item
                label="请假类型："
                prop="type"
                required
                :borderBottom="false"
                label-position="top"
                @click="handleAction('请假类型')"
                style="margin-top:10px"
              >
                <u-input
                  v-model="form.typeName"
                  placeholder="请选择请假类型"
                  suffixIcon="arrow-right"
                  suffixIconStyle="color: #909399"
                  border="none"
                  disabledColor="transparent"
                  disabled
                />
              </u-form-item>
            </view>
          </view>
          <view style="margin-top:10px;padding: 0px 10px 0px 10px; background: #ffffff">
            <view style="padding-left: 9px">
              <u-form-item
                label="开始时间："
                prop="startTime"
                required
                label-position="top"
                @click="handleDateTime('开始时间', 0, form.startTime)"
              >
                <u-input
                  v-model="form.startTime1"
                  placeholder="请选择开始时间"
                  border="none"
                  suffixIcon="arrow-right"
                  suffixIconStyle="color: #909399;"
                />
              </u-form-item>
            </view>
          </view>
          <view style="margin-top:10px;padding: 0px 10px 0px 10px; background: #ffffff">
            <view style="padding-left: 9px">
              <u-form-item
                label="结束时间："
                prop="endTime"
                required
                label-position="top"
                @click="handleDateTime('结束时间', 1, form.endTime)"
              >
                <u-input
                  v-model="form.endTime1"
                  placeholder="请选择结束时间"
                  border="none"
                  suffixIcon="arrow-right"
                  suffixIconStyle="color: #909399;"
                />
              </u-form-item>
            </view>
          </view>
          <view style="margin-top:10px;padding: 0px 10px 0px 10px; background: #ffffff">
            <view style="padding-left: 9px">
              <u-form-item
                label="时长（小时）："
                prop="duration"
                required
                label-position="top"
              >
                <u-input
                  v-model="form.duration"
                  placeholder="请输入请假时长"
                  border="none"
                  maxlength="4"
                />
              </u-form-item>
            </view>
          </view>
          <view style="margin-top:10px;padding: 0px 10px 0px 10px; background: #ffffff">
            <view style="padding-left: 9px">
              <u-form-item
                label="请假事由："
                prop="reason"
                required
                label-position="top"
              >
                <u-input
                  v-model="form.reason"
                  placeholder="请输入请假事由"
                  border="none"
                  maxlength="18"
                />
              </u-form-item>
            </view>
          </view>
          <view style="margin-top:10px;padding: 0px 10px 0px 10px; background: #ffffff">
            <view style="padding-left: 9px">
              <u-form-item label="图片：" prop="imgUrl" label-position="top" >
                <div style="margin-top: 10px">
                  <oa-upload :uploadCount="1" :uploadImage="form.imgUrl" @uploadSuccessChange="uploadSuccessChange" @uploadDeleteChange="uploadDeleteChange"></oa-upload>
                </div>
                <!-- <view style="color: #666666">图片支持png、jpg</view> -->
              </u-form-item>
            </view>
          </view>
        </u--form>
      </view>
      <u-picker
        :show="actionShow"
        :columns="actionsList"
        :title="actionTitle"
        keyName="label"
        visibleItemCount="6"
        :defaultIndex="[actionDefaultIndex]"
        :closeOnClickOverlay="true"
        @close="actionShow = false"
        @cancel="actionShow = false"
        @confirm="selectAction"
      ></u-picker>
      <u-datetime-picker
        :show="showTime"
        v-model="timeValue"
        mode="datetime"
        @close="showTime = false"
        @cancel="showTime = false"
        @confirm="timeSubmit"
        :closeOnClickOverlay="true"
        :minDate="Number(new Date())"
        :maxDate="Number(new Date('2027'))"
      ></u-datetime-picker>
      <view class="app-button">
        <u-button  type="primary" @click="handleSubmit('提交')" shape="circle"> 提交 </u-button>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onHide, onLaunch, onReady } from "@dcloudio/uni-app";
import {
  ref,
  onMounted,
  inject,
  shallowRef,
  reactive,
  toRefs,
  getCurrentInstance,
} from "vue";
/*----------------------------------接口引入-----------------------------------*/
import {
  companyByNameSelect,
  addBaseCompany,
  delBaseBuild,
  delBaseBuildExtinguish,
} from "@/api/business/mhxf/unitInfoCollection";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
import {
  getOaFormDefinition,
  addQjDocument,
  updateQjDocument,
} from "@/api/oa/approval/index.js";
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const { leaveType } = proxy.useDict("leaveType");
/*----------------------------------变量声明-----------------------------------*/
const props = defineProps({
  data: {
    type: Object,
    default: Object,
  },
})
const actionTitle = ref(null);
const actionsList = ref([]);
const actionDefaultIndex = ref(0);
const actionShow = ref(false);
const uForm = ref(null);
const showTime = ref(false) //时间选择显示隐藏
const timeValue = ref(Number(new Date())) //时间选择值
const timeTitle = ref("") //时间选择标题
const state = reactive({
  form: {
    reason: "",
    type: undefined,
    typeName: undefined,
    formName: undefined,
    duration: "",
    imgUrl: "",
    startTime: "",
    startTime1: "",
    endTime: "",
    endTime1: "",
    formSign: undefined,
    id: undefined,
  },
  rules: {
    type: [{ required: true, message: "请选择请假类型", trigger: "change" }],
    startTime: [
      { required: true, message: "请假开始时间不能为空", trigger: "change" },
    ],
    endTime: [
      { required: true, message: "请假结束时间不能为空", trigger: "change" },
    ],
    duration: [
      { required: true, message: "请假时长不能为空", trigger: "blur" },
    ],
    reason: [{ required: true, message: "请假事由不能为空", trigger: "blur" }],
  },
});

const { form, rules } = toRefs(state);

form.value.formSign = props.data.form.formSign
form.value.id = props.data.form.id
/**
 * @图片上传成功回调
 */
 function uploadSuccessChange(e) {
  form.value.imgUrl = e.url;
}

/**
 * @图片删除回调
 */
function uploadDeleteChange(e) {
  form.value.imgUrl = e;
}

/**
 * @api提交
 */
function handleSubmit(value) {
  console.log(form.value)
  uForm.value
    .validate()
      .then((res) => {
        // proxy.$modal.msg("校验通过");
        addQjDocument({
          id: form.value.id,
          formSign: form.value.formSign,
          type: form.value.type,
          startTime: form.value.startTime,
          endTime: form.value.endTime,
          duration: Number(form.value.duration),
          reason: form.value.reason,
          docStatus: 1,
          image: form.value.image
        }).then((res) => {
          proxy.$modal.msgSuccess("表单提交成功");
          uni.switchTab({
            url: `/pages/business/oa/toDo/index`
          })
        });
      })
      .catch((errors) => {
        proxy.$modal.msg("校验失败");
      });
}

/**
 * @action弹出框点击事件
 */
function handleAction(value, index, ind) {
  if (value == "请假类型") {
    actionTitle.value = value;
    actionsList.value = [leaveType.value];
    actionDefaultIndex.value = 0;
  }
  actionShow.value = true;
}

/**
 * @action弹出框选择事件
 */
function selectAction(e) {
  if(actionTitle.value == "请假类型"){
    form.value.type = e.value[0].value;
    form.value.typeName = e.value[0].label;
  }
  actionShow.value = false;
}
/**
 * @时间弹出框点击事件
 */
function handleDateTime(value, index, time) {
  showTime.value = true;
  timeTitle.value = value;
}

/**
 * @时间选择器
 * @确定按钮事件
 */
function timeSubmit(data) {
  let time = proxy.$time.getFormatterDate(data.value);
  let timeData = time.split(" ")[0] + " " + time.split(" ")[1]
  if (timeTitle.value == "开始时间") {
    form.value.startTime1 = timeData;
    form.value.startTime = timeData;
  } else if (timeTitle.value == "结束时间") {
    form.value.endTime1 = timeData;
    form.value.endTime = timeData;
  }
  showTime.value = false;
}

onLoad((options) => {});

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

<style lang="scss">
.unitInfoCollection-container {
  .centerOne,
  .centerTwo {
    .title {
      color: #333333;
      text-align: center;
      margin-top: 10px;
    }
  }
  :deep(.u-picker__view__column__item) {
    font-size: 13px;
  }
}
.app-button{
  position: fixed;
  bottom:10px;
  left:10px;
  width:calc(100% - 20px);
  button{
    border-radius: 10px !important;
  }
}
</style>