feat: 对接物料数据

songshankun

2023-11-03 bcb8d1e446e0292bf551073ed66c76997b9bdb18

feat: 对接物料数据

 src/api/task.ts

@@ -47,8 +47,8 @@
  startTime: number
  endTime: number
  workHours: string
  inputMaterials: inputMaterial[]
  outputMaterials: inputMaterial[]
  inputMaterials: Material[]
  outputMaterials: Material[]
  workers: Worker[]
  allProcedureNames: string[]
  channel: number
@@ -62,12 +62,11 @@
  CurrentProcedureIndex: number
  CanStarted: boolean
}
export interface inputMaterial {
export interface Material {
  materialId: string
  materialName: string
  amount: number
  unit: string
  background: string
  date: string
}


 src/views/dashboard/components/InputMaterialsList.vue

@@ -6,8 +6,8 @@
    </div>
    <el-scrollbar always class="scroller">
      <div class="materials-b">
        <div v-for="item in inputMaterials" :key="item.materialId">
          <InputOutMaterialInfo :item="item" :background="item.background"></InputOutMaterialInfo>
        <div v-for="item in props.materialList" :key="item.materialId">
          <InputOutMaterialInfo :material="item" @detail-click="onDetailClick"></InputOutMaterialInfo>
        </div>
      </div>
    </el-scrollbar>
@@ -16,23 +16,18 @@
<script setup lang="ts">
import InputOutMaterialInfo from '@/views/dashboard/components/InputOutMaterialInfo.vue'
import BigButton from '@/views/dashboard/components/BigButton.vue'
import { toRefs } from 'vue'
const inputMaterials = [
  {
    materialId: '1111',
    materialName: '输入名称',
    amount: 10,
    unit: '个',
    date: 10
  },
  {
    materialId: '2222222222222222',
    materialName: '输入名称2',
    amount: 20,
    unit: '个',
    background: '#33ccff'
  }
]
import type { Material } from '@/api/task'

const props = defineProps<{
  materialList?: Material[]
}>()
const emits = defineEmits<{
  detailClick: [material: Material]
}>()

function onDetailClick(material: Material) {
  emits('detailClick', material)
}
</script>

<style scoped lang="scss">

 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;

 src/views/dashboard/components/MaterialDetails.vue

@@ -3,19 +3,22 @@
    <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">

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

          <div class="details-b-b">
@@ -44,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<{
@@ -59,14 +64,8 @@
function closeModal() {
  modelData.value = false
}
// 假数据
const materialObj = {
  form: {
    materialId: '1111',
    materialName: '输入名称',
    amount: 10,
    unit: '个',
    date: 10
  },
  materialFlow: [
    {
      label: '已送达',

 src/views/dashboard/components/OutputMaterialsList.vue

@@ -6,8 +6,8 @@
    </div>
    <el-scrollbar always class="scroller">
      <div class="materials-b">
        <div v-for="item in outputMaterials" :key="item.materialId">
          <InputOutMaterialInfo :item="item" :background="item.background"></InputOutMaterialInfo>
        <div v-for="item in props.materialList" :key="item.materialId">
          <InputOutMaterialInfo :material="item" @detail-click="onDetailClick"></InputOutMaterialInfo>
        </div>
      </div>
    </el-scrollbar>
@@ -16,55 +16,18 @@
<script setup lang="ts">
import InputOutMaterialInfo from '@/views/dashboard/components/InputOutMaterialInfo.vue'
import BigButton from '@/views/dashboard/components/BigButton.vue'
import { toRefs } from 'vue'
const outputMaterials = [
  {
    materialId: '1111',
    materialName: '输入名称',
    amount: 10,
    unit: '个'
  },
  {
    materialId: '2222222222222222',
    materialName: '输入名称2',
    amount: 20,
    unit: '个',
    background: '#33ccff'
  },
  {
    materialId: '1111',
    materialName: '输入名称',
    amount: 10,
    unit: '个'
  },
  {
    materialId: '2222222222222222',
    materialName: '输入名称2',
    amount: 20,
    unit: '个',
    background: '#33ccff'
  },
  {
    materialId: '1111',
    materialName: '输入名称',
    amount: 10,
    unit: '个'
  },
  {
    materialId: '2222222222222222',
    materialName: '输入名称2',
    amount: 20,
    unit: '个',
    background: '#33ccff'
  },
  {
    materialId: '2222222222222222',
    materialName: '输入名称2',
    amount: 20,
    unit: '个',
    background: '#33ccff'
  }
]
import type { Material } from '@/api/task'

const props = defineProps<{
  materialList?: Material[]
}>()
const emits = defineEmits<{
  detailClick: [material: Material]
}>()

function onDetailClick(material: Material) {
  emits('detailClick', material)
}
</script>

<style scoped lang="scss">

 src/views/dashboard/index.vue

@@ -23,8 +23,14 @@
          ></ProcessInfo>
        </el-tab-pane>
        <el-tab-pane label="物料清单" name="物料清单">
          <InputMaterialsList></InputMaterialsList>
          <OutputMaterialsList></OutputMaterialsList>
          <InputMaterialsList
            :material-list="activeTask?.Procedure.procedure.inputMaterials"
            @detail-click="showMaterialDetailModal"
          ></InputMaterialsList>
          <OutputMaterialsList
            :material-list="activeTask?.Procedure.procedure.outputMaterials"
            @detail-click="showMaterialDetailModal"
          ></OutputMaterialsList>
        </el-tab-pane>
      </el-tabs>
    </template>
@@ -33,8 +39,8 @@
      <div class="task-detail">
        <TaskControl :task="activeTask" @should-reload="reloadAllData"></TaskControl>
      </div>
      <ColorInfo :order="order" :type="1"></ColorInfo>
      <ColorInfo :order="order" :type="2"></ColorInfo>
      <ColorInfo :type="1"></ColorInfo>
      <ColorInfo :type="2"></ColorInfo>
    </template>
    <template #middleBlock4>
      <SubTitle>人员信息</SubTitle>
@@ -57,11 +63,12 @@
    </template>
  </DashboardLayout>
  <CraftDetailModal v-model="showCraftModelDetail" @close="showCraftModelDetail = false"></CraftDetailModal>
  <MaterialDetails v-model="showMaterialDetail" :material="currentMaterialInfo"></MaterialDetails>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue'
import type { Worker, Order, Task } from '@/api/task'
import type { Worker, Order, Task, Material } from '@/api/task'
import PersonInfo from '@/views/dashboard/components/PersonInfo.vue'
import ProcessInfo from '@/views/dashboard/components/ProcessInfo.vue'
import ColorInfo from '@/views/dashboard/components/ColorInfo.vue'
@@ -84,6 +91,7 @@
import { useDevicesStore } from '@/stores/devices'
import { useCraftModelStore } from '@/stores/craftModel'
import CraftDetailModal from '@/views/dashboard/components/CraftDetailModal.vue'
import MaterialDetails from '@/views/dashboard/components/MaterialDetails.vue'

defineOptions({
  name: 'DashboardView'
@@ -93,10 +101,6 @@
const taskStore = useTasksStore()
const workers = computed(() => {
  return taskStore.activeTask?.Procedure?.procedure?.workers ?? []
})

const process = computed(() => {
  return { product: '产品名称', number: '111', procedure: '工艺名称', isUpdate: true } as any
})

const order = computed(() => {
@@ -157,6 +161,20 @@
  console.log(1)
  showCraftModelDetail.value = true
}

// 是否展示物料详情弹窗
const showMaterialDetail = ref(false)
// 当前要展示的物料详情
const currentMaterialInfo = ref<Material>()

/**
 * 显示物料详情弹窗
 * @param material
 */
function showMaterialDetailModal(material: Material) {
  currentMaterialInfo.value = material
  showMaterialDetail.value = true
}
</script>

<style scoped lang="scss">