feat: 对接物料数据

songshankun

2023-11-03 bcb8d1e446e0292bf551073ed66c76997b9bdb18

 src/views/dashboard/components/InputOutMaterialInfo.vue

@@ -4,57 +4,55 @@
      <div class="card-t-t card_drop">
        <el-popover :width="200" placement="top-start" trigger="click">
          <template #reference>
            {{ item.materialId }}
            {{ material.materialId }}
          </template>
          {{ item.materialId }}
          {{ material.materialId }}
        </el-popover>
      </div>
      <div class="card-t-b">
        设备12
        <el-icon class="right-arrow">
          <Right />
        </el-icon>
        设备13
        <!--        TODO: 接口缺失数据, 待添加-->
        <!--        设备12-->
        <!--        <el-icon class="right-arrow">-->
        <!--          <Right />-->
        <!--        </el-icon>-->
        <!--        设备13-->
      </div>
    </div>
    <div class="card-b">
      <div class="card_drop card-b-l">
        <el-popover :width="200" placement="top-start" trigger="click">
          <template #reference>
            {{ item.materialName }}
            {{ material.materialName }}
          </template>
          {{ item.materialName }}
          {{ material.materialName }}
        </el-popover>
      </div>
      <div class="card-b-r">
        <el-popover v-if="item.date" popper-class="card-info" :width="110" placement="top" trigger="click">
          <template #reference> {{ item.amount }} {{ item.unit }} </template>
          预计{{ item.date }}分钟送达
        <el-popover v-if="material.date" popper-class="card-info" :width="110" placement="top" trigger="click">
          <template #reference> {{ material.amount }} {{ material.unit }} </template>
          预计{{ material.date }}分钟送达
        </el-popover>
        <div v-else>{{ item.amount }} {{ item.unit }}</div>
        <div v-else>{{ material.amount }} {{ material.unit }}</div>
      </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 { ref, toRefs } from 'vue'
import type { Material } from '@/api/task'
import { toRefs } from 'vue'
export interface InputOutMaterialInfoProps {
  item: inputMaterial
  background?: string
  material: Material
  // TODO: 接口还不支持, 预留
  type?: '已送达' | '运输中'
}

const props = withDefaults(defineProps<InputOutMaterialInfoProps>(), {
  background: '#ffcc00'
})
const { item, background } = toRefs(props)
const showModal = ref(false)

const props = defineProps<InputOutMaterialInfoProps>()
const { material } = toRefs(props)
const emits = defineEmits<{
  detailClick: [material: Material]
}>()
function materialInfoClick() {
  showModal.value = true
  emits('detailClick', material.value)
}
</script>

@@ -93,8 +91,7 @@
    font-size: 12px;
    color: #333;
    padding: 3px 5px;
    // background: $status-done;
    background-color: v-bind(background);
    background: $status-done;
    text-align: left;
    .card-t-t {
      width: 100%;
@@ -126,7 +123,7 @@
  background: red !important;
  font-size: 12px;
  color: #fff;
  border: 0px;
  border: 0;
  border-radius: 10px;
  // height:20px!important;
  line-height: 8px !important;