报工记录列表增加人员姓名

yangfeng

2023-12-12 1519870c0e18171ced014a840e86a459dc6b00f1

 src/views/dashboard/components/MaterialDetails.vue

@@ -3,36 +3,42 @@
    <BaseModal v-model="modelData" :wider="true" @close="closeModal">
      <template #title>物料详情 </template>
      <div class="details-box">
        <div class="details-t">
          <div class="details-t-t">{{ materialObj.form.materialId }}</div>
        <div v-if="material" class="details-t">
          <div class="details-t-t">{{ material.materialId }}</div>
          <div class="details-t-b">
            <div class="details-t-b-l">
              <div class="item">物料名称：{{ materialObj.form.materialName }}</div>
              <div class="item">数量：{{ materialObj.form.amount }}</div>
              <div class="item">物料规格：{{ materialObj.form.amount }}</div>
              <div class="item">物料类型：{{ materialObj.form.amount }}</div>
              <div class="item">物料名称：{{ material.materialName }}</div>
              <div class="item">数量：{{ material.amount }}</div>
              <div class="item">物料规格：{{ material.amount }}</div>
              <div class="item">物料类型：{{ material.amount }}</div>
            </div>
            <BigButton class="btn" bg-color="#03d203f0">已送达</BigButton>
            <!--   TODO:  物料送达缺接口-->
            <BigButton v-if="false" class="btn" bg-color="#03d203f0">已送达</BigButton>
          </div>
        </div>
        <div class="details-b">
          <el-scrollbar always class="scroller">
            <div class="details-b-t">运输详情</div>
            <div class="details-b-b">

        <!--   TODO:  物料送达缺接口-->
        <div v-if="false" class="details-b">
          <div class="details-b-t">运输详情</div>

          <div class="details-b-b">
            <el-scrollbar always class="scroller">
              <el-steps finish-status="success" class="steps" direction="vertical">
                <el-step v-for="(item, index) in materialObj.materialFlow" :key="index" icon="">
                  <template #title>
                    {{ item.label }}
                  </template>
                  <template #description>
                    {{ item.date }}
                    {{ item.name }}
                    {{ item.deviceName }}
                    <div class="details-date">{{ item.date }}</div>
                    <div class="details-name">
                      {{ item.name }}
                      <span>{{ item.deviceName }}</span>
                    </div>
                  </template>
                </el-step>
              </el-steps>
            </div>
          </el-scrollbar>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </BaseModal>
@@ -41,11 +47,13 @@
<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import BigButton from '@/views/dashboard/components/BigButton.vue'
import { ref } from 'vue'
import type { Material } from '@/api/task'
export interface MaterialDetailsProps {
  material?: Material
  modelValue: boolean
}
const props = withDefaults(defineProps<MaterialDetailsProps>(), {
  material: undefined,
  modelValue: false
})
const emit = defineEmits<{
@@ -56,14 +64,8 @@
function closeModal() {
  modelData.value = false
}
// 假数据
const materialObj = {
  form: {
    materialId: '1111',
    materialName: '输入名称',
    amount: 10,
    unit: '个',
    date: 10
  },
  materialFlow: [
    {
      label: '已送达',
@@ -94,7 +96,7 @@
</script>
<style scoped lang="scss">
$status-default: #03d203f0;
$status-running: #f76c0f;
$status-running: #33ccff;
$status-ready: #13235a;
$status-done: #0dfde6;
.details-box {
@@ -145,12 +147,12 @@
      line-height: 30px;
      height: 30px;
      width: 100%;
      margin-bottom: 20px;
    }
    .details-b-b {
      width: 100%;
      height: calc(100% - 30px);
      overflow-x: auto;
      margin-top: -5px;
      height: calc(100% - 60px);
      overflow-y: auto;
      padding: 0 20px;
      .steps {
        height: 100%;
@@ -158,12 +160,33 @@
          width: 16px;
          height: 16px;
        }
        :deep(.el-step__icon.is-text) {
          border-color: $status-running !important;
        }
        :deep(.el-step__icon-inner) {
          display: none !important;
        }
        .el-step__title {
          line-height: 25px;
          font-size: 14px;
          font-size: 18px;
        }
        .el-step__title.is-process {
          color: #a8abb2;
        // .el-step__title.is-process {
        //   color: #a8abb2;
        // }
      }
      .details-date {
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        margin-top: 5px;
      }
      .details-name {
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        margin: 10px 0 20px;
        span {
          margin-left: 15px;
        }
      }
    }