物料详情的弹框开发一半

haoxuan

2023-11-02 4757e21f5477d10934c8e26d28e19bbafaa7196f

物料详情的弹框开发一半

 src/views/dashboard/components/InputOutMaterialInfo.vue

@@ -1,5 +1,5 @@
<template>
  <div class="input-out-material-info">
  <div class="input-out-material-info" @click="materialInfoClick">
    <div class="card-t">
      <div class="card-t-t card_drop">
        <el-popover :width="200" placement="top-start" trigger="click">
@@ -35,12 +35,13 @@
      </div>
    </div>
  </div>
  <MaterialDetails v-model="showModal"></MaterialDetails>
</template>
<script setup lang="ts">
import type { inputMaterial } from '@/api/task'
import MaterialDetails from '@/views/dashboard/components/MaterialDetails.vue'
import { Right } from '@element-plus/icons-vue'
import { toRefs } from 'vue'

import { ref, toRefs } from 'vue'
export interface InputOutMaterialInfoProps {
  item: inputMaterial
  background?: string
@@ -50,6 +51,11 @@
  background: '#ffcc00'
})
const { item, background } = toRefs(props)
const showModal = ref(false)

function materialInfoClick() {
  showModal.value = true
}
</script>

<style scoped lang="scss">
@@ -70,6 +76,7 @@
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;

  .card_drop {
    width: 100%;

 src/views/dashboard/components/MaterialDetails.vue

New file
@@ -0,0 +1,176 @@
<template>
  <div class="material-details">
    <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 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>
            <BigButton 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">
              <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 }}
                  </template>
                </el-step>
              </el-steps>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </BaseModal>
  </div>
</template>
<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import BigButton from '@/views/dashboard/components/BigButton.vue'
import { ref } from 'vue'
export interface MaterialDetailsProps {
  modelValue: boolean
}
const props = withDefaults(defineProps<MaterialDetailsProps>(), {
  modelValue: false
})
const emit = defineEmits<{
  'update:modelValue': [show: boolean]
}>()
const modelData = useVModel(props, 'modelValue', emit)

function closeModal() {
  modelData.value = false
}
const materialObj = {
  form: {
    materialId: '1111',
    materialName: '输入名称',
    amount: 10,
    unit: '个',
    date: 10
  },
  materialFlow: [
    {
      label: '已送达',
      date: '2023-07-11',
      name: '张三',
      deviceName: '设备名称'
    },
    {
      label: '已送达',
      date: '2023-07-11',
      name: '张三',
      deviceName: '设备名称'
    },
    {
      label: '已送达',
      date: '2023-07-11',
      name: '张三',
      deviceName: '设备名称'
    },
    {
      label: '已送达',
      date: '2023-07-11',
      name: '张三',
      deviceName: '设备名称'
    }
  ]
}
</script>
<style scoped lang="scss">
$status-default: #03d203f0;
$status-running: #f76c0f;
$status-ready: #13235a;
$status-done: #0dfde6;
.details-box {
  height: 600px;
  .details-t {
    width: 100%;
    padding: 10px 30px;
    height: 100px;
    color: $status-done;
    font-size: 16px;
    .details-t-t {
      font-size: 23px;
      line-height: 30px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .details-t-b {
      width: 100%;
      height: 90px;
      padding: 0 30px 10px;
      .details-t-b-l {
        float: left;
        width: calc(100% - 110px);
        .item {
          width: 50%;
          float: left;
        }
      }
      .btn {
        width: 110px;
        float: right;
        font-size: 14px;
        height: 35px;
        line-height: 35px;
      }
    }
  }
  .details-b {
    width: calc(100% - 60px);
    padding: 10px 20px;
    background: $status-ready;
    border-radius: 4px;
    margin: 20px 30px 10px;
    height: calc(100% - 140px);
    color: #fff;
    .details-b-t {
      font-size: 17px;
      line-height: 30px;
      height: 30px;
      width: 100%;
    }
    .details-b-b {
      width: 100%;
      height: calc(100% - 30px);
      overflow-x: auto;
      margin-top: -5px;
      padding: 0 20px;
      .steps {
        height: 100%;
        .el-step__icon {
          width: 16px;
          height: 16px;
        }
        .el-step__title {
          line-height: 25px;
          font-size: 14px;
        }
        .el-step__title.is-process {
          color: #a8abb2;
        }
      }
    }
  }
}

.scroller {
  padding: 4px 16px;
}
</style>