1.报工 2.加减公共组件。

src/api/process/reportBreak.ts

@@ -25,3 +25,21 @@ export function addBreakReport(data: object) {
     data: data,
   });
 }
+
+// 报工
+export function reportWork(data: object) {
+  return request({
+    url: `/api/v1/process/info/reporting`,
+    method: "post",
+    data: data,
+  });
+}
+
+// 多人报工工时分配列表查询
+export function reportWorkList(id: string) {
+  return request({
+    url: `/api/v1/process/processUserReport/list`,
+    method: "post",
+    data: { processId: id },
+  });
+}

src/components/NumberInput/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="operate">
+    <div class="describeText operateText">实际值</div>
+    <div class="operateBox">
+      <div class="leftBox">
+        <svg-icon
+          :icon-class="jiaDisabled ? 'bujian' : 'jian'"
+          class="svgStyle"
+          size="25"
+          @click="value = value - step"
+        />
+      </div>
+      <!--      <div class="showSum">1212</div>-->
+      <el-input
+        v-model="value"
+        :disabled="jiaDisabled"
+        :max="max"
+        :min="min"
+        class="showSum"
+        type="number"
+      />
+      <div class="rightBox">
+        <svg-icon
+          :icon-class="jiaDisabled ? 'bujia' : 'jia'"
+          class="svgStyle"
+          size="25"
+          @click="value = value + step"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+  min: {
+    type: Number,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    default: 100000000,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const jiaDisabled = computed(() => {
+  return props.max && props.modelValue >= props.max;
+});
+
+const value = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    console.log("value", val);
+    if (val < props.min) {
+      val = props.min;
+    }
+    if (val > props.max) {
+      val = props.max;
+    }
+    emits("update:modelValue", val);
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.operate {
+  .operateText {
+    margin-bottom: $p5;
+  }
+
+  .operateBox {
+    width: 290px;
+    height: 70px;
+    border: 2px solid black;
+    border-radius: 16px;
+    display: flex;
+    justify-content: space-between;
+
+    .leftBox {
+      width: 70px;
+      height: 70px;
+      @include flex;
+    }
+
+    .showSum {
+      flex: 1;
+      @include flex;
+      border: 2px solid black;
+      border-top: 0px;
+      border-bottom: 0px;
+      font-weight: bold;
+      font-size: $f38;
+    }
+
+    .rightBox {
+      width: 70px;
+      height: 70px;
+      @include flex;
+    }
+  }
+}
+</style>

src/typings/components.d.ts

@@ -6,6 +6,7 @@
 export { }
 
 declare module 'vue' {
+  NumberInput: typeof import('./../components/NumberInput/index.vue')['default']
   ExcelUpload: typeof import('./../components/Upload/ExcelUpload.vue')['default']
   CommonTable: typeof import('./../components/CommonTable/index.vue')['default']
   AppLink: typeof import('./../components/AppLink/index.vue')['default']

src/views/pro-operation/report-break/index.vue

@@ -218,7 +218,7 @@ const rules = reactive({
 const openReportBreakDrawer = () => {
   getProcessInfo(processStore.scanInfo.id).then((res) => {
     processStore.scanInfo.currentState = res.data.currentState;
-    if (res.data.currentState === "start") {
+    if (res.data.currentState !== "start") {
       ElMessage.error("当前工单状态不允许报故");
       return;
     } else {

src/views/pro-operation/report-work/index.vue

@@ -0,0 +1,227 @@
+<template>
+  <el-drawer
+    v-model="drawerVisible"
+    :close-on-click-modal="false"
+    :show-close="false"
+    destroy-on-close
+    direction="rtl"
+    size="972px"
+  >
+    <template #header>
+      <div class="drawerTitle">报工</div>
+    </template>
+    <template #default>
+      <el-scrollbar>
+        <div id="drawContent">
+          <el-form
+            ref="formRef"
+            disabled
+            label-position="left"
+            label-width="auto"
+            size="large"
+          >
+            <el-row
+              v-for="(per, index) in persons"
+              :key="per.userName"
+              :gutter="20"
+              style="width: 100%"
+            >
+              <el-col :span="10">
+                <el-form-item label="" prop="userName">
+                  <el-select
+                    v-model="per.userName"
+                    filterable
+                    placeholder="请选择人员"
+                    value-key="id"
+                  >
+                    <el-option
+                      v-for="item in dictStroe.allUsers"
+                      :key="item.id"
+                      :label="item.userName"
+                      :value="item.userName"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="10">
+                <el-form-item label="" prop="workingHoursRate">
+                  <el-select
+                    v-model="per.workingHoursRate"
+                    placeholder="请选择工时比例"
+                    value-key="value"
+                  >
+                    <el-option
+                      v-for="item in rateArray"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <div v-if="formDisabled" class="right-btns">
+                  <CirclePlus
+                    class="icon-btn"
+                    @click="
+                      persons.push({
+                        userName: null,
+                        workingHoursRate: null,
+                      })
+                    "
+                  />
+                  <Remove
+                    v-if="index !== 0"
+                    class="icon-btn"
+                    @click="persons.splice(index, 1)"
+                  />
+                </div>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </el-scrollbar>
+    </template>
+    <template #footer>
+      <div class="bottom-btns">
+        <el-button class="cancelBtn" @click="cancelClick">取消</el-button>
+        <el-button
+          v-if="formDisabled"
+          class="sureBtn"
+          type="primary"
+          @click="confirmClick"
+          >报工
+        </el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { useProcessStore } from "@/store/modules/processView";
+import { useDictionaryStore } from "@/store/modules/dictionary";
+import { getProcessInfo } from "@/api/prosteps";
+
+import { CirclePlus, Remove } from "@element-plus/icons-vue";
+import { reportWork, reportWorkList } from "@/api/process/reportBreak";
+
+const processStore = useProcessStore();
+const dictStroe = useDictionaryStore();
+
+const drawerVisible = ref(false);
+const formDisabled = ref(true);
+
+const formRef = ref<InstanceType<typeof ElForm>>();
+
+const persons = ref<
+  {
+    userName: string | null;
+    workingHoursRate: number | null;
+  }[]
+>([{ userName: null, workingHoursRate: null }]);
+
+const openReportWorkDrawer = () => {
+  getProcessInfo(processStore.scanInfo.id).then((res) => {
+    processStore.scanInfo.currentState = res.data.currentState;
+    if (res.data.currentState !== "start") {
+      ElMessage.warning("当前工单状态不允许报工");
+      formDisabled.value = true;
+      reportWorkList(processStore.scanInfo.id).then((res) => {
+        persons.value = res.data || [];
+      });
+    }
+    drawerVisible.value = true;
+    formDisabled.value = false;
+  });
+};
+
+const cancelClick = () => {
+  drawerVisible.value = false;
+};
+
+const confirmClick = () => {
+  let total = 0;
+  persons.value.forEach((item) => {
+    total += item.workingHoursRate ?? 0;
+  });
+  if (total > 100) {
+    ElMessage.error("总占比不能超过100%");
+    return;
+  }
+
+  let params = {
+    processId: processStore.scanInfo.id,
+    processUserReportList: persons.value,
+  };
+
+  reportWork(params).then((res: any) => {
+    if (res.code === "200") {
+      ElMessage.success("报工成功");
+      drawerVisible.value = false;
+    } else {
+      ElMessage.error("报工失败");
+    }
+  });
+};
+
+defineExpose({
+  openReportWorkDrawer,
+});
+
+const rateArray: { label: string; value: number }[] = [
+  { label: "10%", value: 10 },
+  { label: "20%", value: 20 },
+  { label: "30%", value: 30 },
+  { label: "40%", value: 40 },
+  { label: "50%", value: 50 },
+  { label: "60%", value: 60 },
+  { label: "70%", value: 70 },
+  { label: "80%", value: 80 },
+  { label: "90%", value: 90 },
+  { label: "100%", value: 100 },
+];
+</script>
+
+<style lang="scss" scoped>
+#drawContent {
+  width: 100%;
+}
+
+.right-btns {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  padding-top: 7px;
+  margin-bottom: 15px;
+
+  .icon-btn {
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.bottom-btns {
+  display: flex;
+  justify-content: center;
+  //margin-top: 20px;
+  //margin-bottom: 20px;
+
+  .button {
+    margin-right: 20px;
+  }
+
+  .cancelBtn {
+    width: 292px;
+    height: 80px;
+    background: rgba(0, 0, 0, 0.06);
+    border-radius: 76px 76px 76px 76px;
+  }
+
+  .sureBtn {
+    width: 292px;
+    height: 80px;
+    background: #0a59f7;
+    border-radius: 76px 76px 76px 76px;
+  }
+}
+</style>

src/views/pro-steps/components/jiluxiang.vue

@@ -14,15 +14,24 @@
       </div>
       <div class="rightOperate">
         <div></div>
+        <NumberInput v-model="input" />
         <div class="operate">
           <div class="describeText operateText">实际值</div>
           <div class="operateBox">
             <div class="leftBox">
-              <svg-icon :icon-class="jianDisabled ? 'bujian' : 'jian'" size="25" class="svgStyle" />
+              <svg-icon
+                :icon-class="jianDisabled ? 'bujian' : 'jian'"
+                class="svgStyle"
+                size="25"
+              />
             </div>
             <div class="showSum">1212</div>
             <div class="rightBox">
-              <svg-icon :icon-class="jiaDisabled ? 'bujia' : 'jia'" size="25" class="svgStyle" />
+              <svg-icon
+                :icon-class="jiaDisabled ? 'bujia' : 'jia'"
+                class="svgStyle"
+                size="25"
+              />
             </div>
           </div>
         </div>
@@ -35,7 +44,7 @@
 defineOptions({
   name: "Jiluxiang",
 });
-const input = ref("");
+const input = ref<number>(10);
 const jianDisabled = ref(true);
 const jiaDisabled = ref(false);
 </script>

src/views/pro-steps/components/operates.vue

@@ -13,15 +13,19 @@
     </div>
 
     <ReportBreak ref="reportBreakRef" />
+    <ReportWork ref="reportWorkRef" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import ReportBreak from "@/views/pro-operation/report-break/index.vue"; // ================ 报故
-
+import ReportWork from "@/views/pro-operation/report-work/index.vue"; // = 报工
 // ================ 报故
 const reportBreakRef = ref<InstanceType<typeof ReportBreak>>();
 
+// ================ 报工
+const reportWorkRef = ref<InstanceType<typeof ReportWork>>();
+
 const selectIndex = ref(0);
 const setIndex = (index: number) => {
   selectIndex.value = index;
@@ -37,9 +41,8 @@ const setIndex = (index: number) => {
       break;
     case "weiwai":
       break;
-    case "baogu":
-      break;
     case "baogong":
+      reportWorkRef.value?.openReportWorkDrawer();
       break;
     default:
       break;