besure_app/src/pages/work.vue

<template>
  <view >
    <u-sticky
        class="sticky"
        :custom-nav-height="0"
    >
      <u-navbar
          title="近三天投料"
          bg-color="transparent"
          :title-style="{ fontWeight: 'bold' }"
          :auto-back="false"
          left-icon=""
          safe-area-inset-top
          placeholder
      />
    </u-sticky>
    <uni-notice-bar show-icon scrollable
                    text="安全生产！有序生产！高效生产！" />
<!--    已提交-->
    <uni-section title="已提交" type="line" title-color="#18bc37"></uni-section>
    <el-collapse accordion>
      <el-collapse-item v-for="(item, index) in finishList"  :name="item.id" @click="handleFinishClick(item.id,index)">
        <template #title>
          <el-icon><Tickets /></el-icon>
          <el-text type="success">{{timestampToTime(item.feedingTime)}}</el-text>&nbsp;/&nbsp;
          <el-text  type="warning">{{ findTextByValue(pipelineTypes, item.feedingPipeline)}}</el-text>&nbsp;/&nbsp;
          <el-text type="info">{{findTextByValue(feedingTypes, item.feedingType)  }}</el-text>
        </template>
        <el-text  size="large">{{item.feedingRecordCode}}</el-text>
        <el-row>
          <el-col :span="8">记录人:
            <el-text type="success">{{ item.userName }}</el-text>
          </el-col>
          <el-col :span="8" v-if="item.feedingType !=='org'">重量/kg:
            <el-text>{{ item.weight }} </el-text>
          </el-col>
        </el-row>
        <el-row v-for="(item2, index2) in finishList[index].detailList">
          <el-col :span="8">原料:
            <el-text type="warning">{{item2.itemName}}</el-text>
          </el-col>
          <el-col :span="8">数量:
            <el-text type="success">{{ item2.weight }}</el-text>
          </el-col>
          <el-col :span="8">单位:
            <el-text>{{item2.unitName }} </el-text>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <!--    草稿状态-->
    <uni-section title="草稿" type="line" title-color="#f3a73f"></uni-section>
    <el-collapse accordion>
      <el-collapse-item v-for="(item, index) in draftList"  :name="item.id"  @click="handleDraftClick(item.id,index)">
        <template #title>
          <el-icon><Tickets /></el-icon>
          <el-text type="success">{{timestampToTime(item.feedingTime)}}</el-text>&nbsp;/&nbsp;
          <el-text  type="warning">{{ findTextByValue(pipelineTypes, item.feedingPipeline)}}</el-text>&nbsp;/&nbsp;
          <el-text type="info">{{findTextByValue(feedingTypes, item.feedingType)  }}</el-text>
        </template>
        <el-text  size="large">{{item.feedingRecordCode}}</el-text>
        <el-row>
          <el-col :span="8">记录人:
            <el-text type="success">{{ item.userName }}</el-text>
          </el-col>
          <el-col :span="4" v-if="item.feedingType !=='org'">重量/kg:
            <el-text>{{ item.weight }} </el-text>
          </el-col>
          <el-col :span="3">
            <el-button type="info"  @click="handleUpdate(item.id)">提交</el-button>
          </el-col>
          <el-col :span="3">
            <el-button type="danger"  @click="handleDelete(item.id)">删除</el-button>
          </el-col>
        </el-row>
        <el-row v-for="(item2, index2) in draftList[index].detailList">
          <el-col :span="8">原料:
            <el-text type="warning">{{item2.itemName}}</el-text>
          </el-col>
          <el-col :span="8">数量:
            <el-text type="success">{{ item2.weight }}</el-text>
          </el-col>
          <el-col :span="8">单位:
            <el-text>{{item2.unitName }} </el-text>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <uni-fab v-if="auth.hasPermi('mes:feeding-record:create')"  ref="fab" :pattern="pattern" @fabClick="handleAdd" />
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {getRecordList, updateStatus, deleteById, getDetailByRecordId} from "@/api/mes/record"
import {timestampToTime,timestampToDateTime} from "@/utils/dateUtil";
import { pipelineTypes,feedingTypes, findTextByValue} from "@/api/system/dict/data";
import {Tickets} from "@element-plus/icons-vue";
import modal from "@/plugins/modal";
import tab from "@/plugins/tab";
import {showConfirm} from "@/utils/common";
import auth from "@/plugins/auth";

//已经提交的列表
const finishList = ref([]);
//草稿状态的列表
const draftList = ref([]);
const pattern = {
  color: '#7A7E83',
  backgroundColor: '#fff',
  selectedColor: '#007AFF',
  buttonColor: '#f4c7c7',
  iconColor: '#fff'
}

onMounted(() => {
  getList()
});
// 加载列表数据
function getList() {
  getRecordList("2").then(response => {
    finishList.value = response.data
  })
  getRecordList("1").then(response => {
    draftList.value = response.data
  })
}
function handleFinishClick(id, index){
  getDetailByRecordId(id).then(response => {
    finishList.value[index].detailList = response.data
  })
}
function handleDraftClick(id, index){
  getDetailByRecordId(id).then(response => {
    draftList.value[index].detailList = response.data
  })
}
/** 提交 */
function handleUpdate(id){
  showConfirm("确认提交投料记录吗？").then(res => {
    if (res.confirm) {
      updateStatus(id, 2).then(response => {
        modal.msgSuccess("操作成功")
        getList()
      })
    }
  })
}
/** 提交 */
function handleDelete(id){
  showConfirm("确认删除投料记录吗？").then(res => {
    if (res.confirm) {
      deleteById(id).then(response => {
        modal.msgSuccess("操作成功")
        getList()
      })
    }
  })
}

//新增记录
function handleAdd(){
  tab.navigateTo('/page_record/feedingRecordForm')
}
</script>

<style scoped>
.sticky {
  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
  backdrop-filter: blur(27.18px);
  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
  0 0.5px 0 0 rgba(0, 0, 0, 0.1);
}
</style>