usky-web-mobile/src/pages/business/oa/approval/components/jbd.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"
    style="height:calc(100vh - 110px)"
  >
    <template #default>
      <view class="centerOne">
        <u--form ref="uForm" :model="form" :rules="rules" labelWidth="180">
          <view style="padding: 0px 10px 0px 10px; background: #ffffff">
            <view style="padding-left: 9px">
              <u-form-item
                label="核算方式："
                prop="accountingMethod"
                required
                :borderBottom="false"
                label-position="top"
                @click="handleAction('核算方式')"
                style="margin-top:10px"
              >
                <u-input
                  v-model="form.accountingMethodName"
                  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="image" label-position="top" required>
                <div style="margin-top: 10px">
                  <oa-upload :uploadCount="1" :uploadImage="form.image" @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="list-cell" style="color: #666666; line-height: 25px; width: auto;">
        <view class="content-area-top">
          <view style="width:100%;font-weight:bold;color:#333333;font-size:16px;margin-bottom:20px">流程</view>
          <view class="stepBar">
            <view class="item" v-for="(item, index) in nodeList" :key="index">
              <view class="left">
                <view class="yuan"></view>
                <div>
                  <view class="title">
                    {{ item.nodeName }}
                  </view>
                  <view class="name">
                    {{ item.appointApprover.split(',').length }}人{{ item.nodeType == "1" ? "审批" : item.nodeType == "2" ? "抄送" : "" }}
                  </view>
                </div>
              </view>
              <view class="right">
                <view class="content-area-header  mb10 text-center" style="display: inline-block"  v-for="(item2, index2) in ccTo[index]" :key="index2">
                  <img v-if='item2.avatar' class="content-area-header-avatarImg mlr5" :src='item2.avatar' style="display: block; width: 40px; height: 40px;border-radius: 6px;" />
                  <u-avatar
                  v-else
                    class="content-area-header-avatar mlr5"
                    :text='item2.nickName.length > 2 ? item2.nickName.slice(1, 3) : item2.nickName'
                    shape="square"
                    size="40"
                    fontSize="12"
                    color="#ffffff"
                    :bgColor="proxy.$settingStore.themeColor.color"
                  ></u-avatar>
                  <u-text :text='item2.nickName' color="#000000" size="14" align="center" class="userName"></u-text>
                </view>
              </view>
              <view class="line gray" v-if="index < nodeList.length -1">
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </oa-scroll>
  <view class="app-button">
    <u-button  type="primary" @click="handleSubmit('提交')" shape="circle"> 提交 </u-button>
  </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 {
  companyByNameSelect,
  addBaseCompany,
  delBaseBuild,
  delBaseBuildExtinguish,
} from "@/api/business/mhxf/unitInfoCollection";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
import {
  getOaFormDefinition,
  addOaDocument,
} from "@/api/oa/approval/index.js";
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
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: "",
    accountingMethod: undefined,
    accountingMethodName: undefined,
    formName: undefined,
    duration: "",
    image: "",
    startTime: "",
    startTime1: "",
    endTime: "",
    endTime1: "",
    formSign: undefined,
    formId: undefined,
  },
  rules: {
    accountingMethod: [{ 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" }],
    image: [{ required: true, message: "日报及打卡记录图片不能为空", trigger: "blur" }],
  },
  userData:[],
  ccTo:[]
});

const { form, rules, userData, ccTo} = toRefs(state);
const nodeList = ref([]);
state.userData = props.data.userData

nodeList.value = props.data.nodeList
state.ccTo = props.data.ccTo


form.value.formSign = props.data.form.formSign
form.value.formId = props.data.form.id

//编辑状态
if(JSON.stringify(props.data.docNoDetail)!= "{}"){
  form.value.accountingMethod = props.data.docNoDetail.accountingMethod.toString()
  form.value.accountingMethodName = "申请调休"
}

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

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

/**
 * @api提交
 */
function handleSubmit(value) {
  uForm.value
    .validate()
      .then((res) => {
        if(form.value.docNo){
          updateDocument({
            docNo: form.value.docNo,
            id: form.value.id,
            formId: form.value.formId,
            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("表单修改成功");
            if(getCurrentPages().length > 1){
              uni.navigateBack()
            }else{
              uni.switchTab({
                url: `/pages/business/oa/approval/index`
              })
            }
          });
        }else{
          addOaDocument({
            formId: form.value.formId,
            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("表单提交成功");
            if(getCurrentPages().length > 1){
              uni.navigateBack()
            }else{
              uni.redirectTo({
                url: `/pages/business/oa/approval/index`
              })
            }
          });
        }
      })
      .catch((errors) => {
        proxy.$modal.msg("校验失败");
      });
}

/**
 * @action弹出框点击事件
 */
function handleAction(value, index, ind) {
  if (value == "核算方式") {
    actionTitle.value = value;
    actionsList.value = [[{label:"申请调休",value:"0"}]];
    actionDefaultIndex.value = 0;
  }
  actionShow.value = true;
}

/**
 * @action弹出框选择事件
 */
function selectAction(e) {
  if(actionTitle.value == "核算方式"){
    form.value.accountingMethod = e.value[0].value;
    form.value.accountingMethodName = 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);
  background: #fff;
  button{
    border-radius: 10px !important;
  }
}
.stepBar{
    margin-top:-20px;
    font-weight: 400;
    width:100%;
    .item{
    position: relative;
      .left{
        width:100%;
        position: relative;
        .yuan{
          width:10px;
          height:10px;
          margin-top:10px;
          vertical-align: middle;
          float: left;
          border-radius: 50%;
          background: #999;
        }
        >div{
          width:80%;
          margin-left:20px;
          vertical-align: top;
          line-height: 20px;
          .title{
            font-size: 14px;
          }
          .name{
            font-size: 12px;
            color: #999;
          }
        }
      }
      .line{
        height:84%;
        width:1px;
        position: absolute;
        top:24px;
        left:5px;
        background: #999;
      }
      .right{
        width:calc(100% - 100px);
        margin-left:100px;
        text-align: right;
      }
    }
    .item:nth-child(1){
      margin-top:10%;
    }
  }
.userName{
  white-space: nowrap;      /* 确保文本在一行内显示 */
  overflow: hidden;         /* 超出容器部分隐藏 */
  text-overflow: ellipsis;  /* 超出部分显示省略号 */
  width: 50px !important;             /* 定义容器宽度 */
  text-align: center;
}
</style>