cmc-oa/oa-ui-app/pages/form/device/device.vue

<template>
  <view class="form-container">
    <!-- 表单标题 -->
    <view class="form-title">
      <text class="title-text">设备申请表</text>
      <view class="title-line"></view>
    </view>
    <!-- 表单内容 -->
    <uni-forms ref="form" :modelValue="form" :rules="rules" label-position="top" label-width="150" class="custom-form">
      <flow-note :taskForm="taskForm"></flow-note>
      <!-- 当前节点 -->
      <uni-forms-item label="当前节点" class="form-item" v-if="taskName">
        <uni-tag :inverted="true" type="primary" :text="taskName"></uni-tag>
      </uni-forms-item>

      <!-- 流程发起人 -->
      <uni-forms-item label="填报人" class="form-item">
        <b style="font-size:30rpx;">{{ applierUserName }}</b>
      </uni-forms-item>

      <!-- 填报日期 -->
      <uni-forms-item label="填报日期" class="form-item">
        <text>{{ form.applyDate }}</text>
      </uni-forms-item>

      <!-- 选择项目 -->
      <uni-forms-item label="选择项目" required class="form-item" name="projectId">
        <uv-button type="primary" @click="openProject = true" v-if="taskName == '设备申请'">+ 选择项目</uv-button>
        <ProjectPicker :visible.sync="openProject" :selected.sync="selectedProject" @confirm="handleConfirm" />
        <ProjectInfo :project="projectObj"></ProjectInfo>
      </uni-forms-item>

      <!-- 设备选择 -->
      <uni-forms-item label="选择设备" required class="form-item" name="devices">
        <uv-button type="primary" @click="openDevice = true" v-if="taskName == '设备申请'">+ 选择设备</uv-button>
        <device-picker :visible.sync="openDevice" :selected.sync="selectDevice"
          @confirm="handleDeviceConfirm"></device-picker>
        <uni-table v-if="deviceList.length > 0">
          <uni-tr>
            <uni-th>序号</uni-th>
            <uni-th>出厂编号</uni-th>
            <uni-th>设备品牌</uni-th>
            <uni-th>设备名称</uni-th>
            <uni-th>规格型号</uni-th>
            <uni-th>存放地址</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in deviceList" :key="index">
            <uni-td>{{ index + 1 }}</uni-td>
            <uni-td>{{ item.code }}</uni-td>
            <uni-td>{{ item.brand }}</uni-td>
            <uni-td>{{ item.name }}</uni-td>
            <uni-td>{{ item.series }}</uni-td>
            <uni-td>{{ item.place }}</uni-td>
          </uni-tr>
        </uni-table>
      </uni-forms-item>

      <!-- 申领事由 -->
      <uni-forms-item label="申领事由" required class="form-item" name="applyReason">
        <uni-easyinput type="textarea" v-model="form.applyReason" placeholder="请输入申领事由"
          :disabled="taskName != '设备申请'" />
      </uni-forms-item>

      <!-- 日期选择 -->
      <view class="date-range">
        <uni-forms-item label="使用日期" required class="form-item" name="dateRange">
          <uni-datetime-picker v-model="dateRange" type="daterange" rangeSeparator="至" :clearIcon="false"
            :disabled="taskName != '设备申请'" @change="handleDateRangeChange" />
        </uni-forms-item>
        <uni-forms-item label="共计" class="form-item">
          <text>{{ form.days + '天' }}</text>
        </uni-forms-item>
      </view>

      <!-- 安排设备意见 -->
      <uni-forms-item label="拟发放设备" class="form-item" v-if="taskName == '安排设备'">
        <uni-table v-if="modifyDeviceList.length > 0">
          <uni-tr>
            <uni-th>序号</uni-th>
            <uni-th>出厂编号</uni-th>
            <uni-th>设备品牌</uni-th>
            <uni-th>设备名称</uni-th>
            <uni-th>规格型号</uni-th>
            <uni-th>存放地址</uni-th>
            <uni-th>操作</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in modifyDeviceList" :key="index">
            <uni-td>{{ index + 1 }}</uni-td>
            <uni-td>{{ item.code }}</uni-td>
            <uni-td>{{ item.brand }}</uni-td>
            <uni-td>{{ item.name }}</uni-td>
            <uni-td>{{ item.series }}</uni-td>
            <uni-td>{{ item.place }}</uni-td>
            <uni-td>
              <uv-button type="primary" size="mini" @click="replaceRowData(item, index)">重新选择</uv-button>
              <uv-button type="error" size="mini" @click="deleteRowData(item, index)">删除</uv-button>
            </uni-td>
          </uni-tr>
        </uni-table>
        <uv-button type="primary" @click="addRowdata()" v-if="taskName == '安排设备'">新增设备</uv-button>
      </uni-forms-item>

      <!-- 安排设备意见 -->
      <uni-forms-item label="安排设备意见" class="form-item" v-if="taskName == '安排设备'">
        <uni-easyinput type="textarea" v-model="form.dispatchComment" placeholder="请输入安排设备意见"
          :disabled="taskName != '安排设备'" />
      </uni-forms-item>

      <!-- 分管审核意见 -->
      <uni-forms-item label="分管审核意见" class="form-item" v-if="taskName == '分管审核'">
        <uni-easyinput type="textarea" v-model="form.managerComment" placeholder="请输入分管审核意见"
          :disabled="taskName != '分管审核'" />
      </uni-forms-item>

      <!-- 归还确认 -->
      <uni-forms-item label="已归还设备" class="form-item" v-if="taskName == '归还确认'">
        <uni-table v-if="returnDevicesList.length > 0">
          <uni-tr>
            <uni-th>序号</uni-th>
            <uni-th>出厂编号</uni-th>
            <uni-th>设备品牌</uni-th>
            <uni-th>设备名称</uni-th>
            <uni-th>规格型号</uni-th>
            <uni-th>存放地址</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in returnDevicesList" :key="index">
            <uni-td>{{ index + 1 }}</uni-td>
            <uni-td>{{ item.code }}</uni-td>
            <uni-td>{{ item.brand }}</uni-td>
            <uni-td>{{ item.name }}</uni-td>
            <uni-td>{{ item.series }}</uni-td>
            <uni-td>{{ item.place }}</uni-td>
          </uni-tr>
        </uni-table>
      </uni-forms-item>

      <!-- 需维修设备 -->
      <uni-forms-item label="需维修设备" class="form-item" v-if="taskName == '归还确认'">
        <uni-data-select v-model="form.repairDevices" :localdata="modifyDeviceList" multiple
          :disabled="taskName != '归还确认'" />
      </uni-forms-item>

      <!-- 备注 -->
      <uni-forms-item label="备注" class="form-item" v-if="taskName == '归还确认'">
        <uni-easyinput type="textarea" v-model="form.remark" placeholder="请输入备注" :disabled="taskName != '归还确认'" />
      </uni-forms-item>

      <!-- 归还日期 -->
      <uni-forms-item label="归还日期" class="form-item" v-if="taskName == '归还确认'">
        <uni-datetime-picker v-model="form.returnDate" type="date" :disabled="taskName != '归还确认'" />
      </uni-forms-item>

      <!-- 操作按钮 -->
      <view class="form-actions">
        <uv-button style="margin-bottom: 5px;" type="warning" @click="saves">保存</uv-button>
        <uv-button type="primary" @click="submit" v-if="taskName == '设备申请'">提交申请</uv-button>
        <template v-else>
          <uv-button type="primary" @click="completeApply">完成审批</uv-button>
        </template>
      </view>
    </uni-forms>
  </view>
</template>

<script>
import { parseTime } from "@/utils/common.js"
import { listDeviceApproval, getDeviceApproval, updateDeviceApproval, submitDeviceApproval, modifyDeviceApproval } from '@/api/oa/device/deviceApproval'
import FlowNote from '@/pages/components/flowNote.vue';
import ProjectPicker from '@/pages/components/ProjectPicker.vue';
import ProjectInfo from '@/pages/components/ProjectInfo.vue';
import DevicePicker from "@/pages/components/DevicePicker.vue";

export default {
  components: {
    FlowNote,
    ProjectPicker,
    ProjectInfo,
    DevicePicker
  },
  props: {
    taskForm: Object,
    taskName: String,
    startUserName: String,
  },
  created() {
    this.applierUserName = this.startUserName;
    this.initForm();
  },
  data() {
    return {
      form: {
        user: {
          nickName: ''
        },
        dept: {
          deptName: ''
        },
        projectId: '',
        applyDate: '',
        applyReason: '',
        beginDate: '',
        endDate: '',
        days: 0,
        dispatchComment: '',
        managerComment: '',
        devices: [],
        repairDevices: [],
        remark: '',
        returnDate: ''
      },
      dateRange: [],
      rules: {
        projectId: {
          rules: [{ required: true, errorMessage: '请选择项目' }]
        },
        devices: {
          rules: [{ required: true, errorMessage: '请选择设备' }]
        },
        applyReason: {
          rules: [{ required: true, errorMessage: '请输入申领事由' }]
        },
        dateRange: {
          rules: [{ required: true, errorMessage: '请选择使用日期' }]
        }
      },
      applierUserName: '',
      openProject: false,
      selectedProject: null,
      projectObj: {},
      openDevice: false,
      selectDevice: [],
      deviceList: [],
      modifyDeviceList: [],
      returnDevicesList: [],
      formTotal: 0
    };
  },
  methods: {
    initForm() {
      getDeviceApproval(this.taskForm.formId).then(res => {
        if (res.data) {
          this.formTotal = 1;
          this.form = res.data;
          this.deviceList = res.data.devices || [];
          this.modifyDeviceList = res.data.modifyDevices || [];
          this.returnDevicesList = res.data.returnDevices || [];
          if (this.form.beginDate && this.form.endDate) {
            this.dateRange = [this.form.beginDate, this.form.endDate];
          }
        } else {
          this.form.applier = this.$store.getters.userId;
          this.form.applyDate = parseTime(new Date(), "{y}-{m}-{d}");
          let name = this.applierUserName.split('-');
          this.form.user.nickName = name[0];
          this.form.dept.deptName = name[1];
          this.formTotal = 0;
        }
      });
    },
    handleConfirm(project) {
      this.selectedProject = project;
      this.projectObj = project;
      this.form.projectId = project.projectId;
    },
    handleDeviceConfirm(devices) {
      this.deviceList = Array.isArray(devices) ? devices : [devices];
      this.form.devices = this.deviceList.map(item => item.deviceId);
    },
    handleDateRangeChange(e) {
      if (Array.isArray(e) && e.length === 2) {
        const [start, end] = e;
        this.form.beginDate = start;
        this.form.endDate = end;
        this.calculateDay();
      }
    },
    calculateDay() {
      if (this.form.beginDate && this.form.endDate) {
        const begin = new Date(this.form.beginDate);
        const end = new Date(this.form.endDate);
        if (!isNaN(begin.getTime()) && !isNaN(end.getTime())) {
          this.form.days = Math.ceil((end - begin) / (1000 * 60 * 60 * 24)) + 1;
        }
      }
    },
    replaceRowData(row, index) {
      this.openDevice = true;
      this.currentIndex = index;
    },
    deleteRowData(row, index) {
      this.modifyDeviceList.splice(index, 1);
    },
    addRowdata() {
      this.openDevice = true;
      this.currentIndex = -1;
    },
    submit() {
      this.$refs.form.validate().then(() => {
        submitDeviceApproval(this.form).then(res => {
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          });
          uni.navigateBack();
        });
      });
    },
    saves() {
      try {
        // 构建提交数据
        let submitData = {
          ...this.form,
          formId: this.taskForm.formId,
          deviceApplyId: this.taskForm.formId,
        };
        let formData = new FormData();
        let jsonForm = JSON.stringify(submitData);
        formData.append("form", jsonForm);
        console.log(formData.get('form'));
        // 根据表单状态选择接口
        if (this.formTotal !== 0) {
          modifyDeviceApproval(formData).then(res => {
            console.log('修改响应:', res);
            if (res.code === 200) {
              uni.showToast({
                title: '保存成功',
                icon: 'success'
              });
            } else {
              uni.showToast({
                title: res.msg || '保存失败',
                icon: 'error'
              });
            }
          }).catch(error => {
            console.error('修改错误:', error);
            uni.showToast({
              title: error.message || '保存失败',
              icon: 'error'
            });
          });
        } else {
          submitDeviceApproval(formData).then(res => {
            console.log('提交响应:', res);
            if (res.code === 200) {
              uni.showToast({
                title: '保存成功',
                icon: 'success'
              });
            } else {
              uni.showToast({
                title: res.msg || '保存失败',
                icon: 'error'
              });
            }
          }).catch(error => {
            console.error('提交错误:', error);
            uni.showToast({
              title: error.message || '保存失败',
              icon: 'error'
            });
          });
        }
      } catch (error) {
        console.error('保存方法错误:', error);
        uni.showToast({
          title: error.message || '保存失败',
          icon: 'error'
        });
      }
    },
    completeApply() {
      modifyDeviceApproval(this.form).then(res => {
        uni.showToast({
          title: '审批完成',
          icon: 'success'
        });
        uni.navigateBack();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  padding: 32rpx;
}

.form-title {
  text-align: center;
  margin-bottom: 32rpx;

  .title-text {
    font-size: 36rpx;
    font-weight: bold;
  }

  .title-line {
    height: 2rpx;
    background: #eee;
    margin-top: 16rpx;
  }
}

.date-range {
  // display: flex;
  flex-wrap: wrap;
  gap: 32rpx;
}

.form-actions {
  justify-content: center;
  gap: 32rpx;
  margin-top: 32rpx;
}

::v-deep .uni-forms-item__label {
  font-weight: bold;
}
</style>