besure_app/src/pages/application/components/deskArrangementHandle.vue

<template>
  <view>
    <u-sticky
        class="sticky"
        :custom-nav-height="0"
    >
      <u-navbar
          title="工位安排"
          bg-color="transparent"
          :auto-back="true"
          :title-style="{ fontWeight: 'bold' }"
          safe-area-inset-top
          placeholder
      />
      <u-tabs
          :list="menuList"
          :current="current"
          key-name="name"
          :scrollable="false"
          :active-style="{
          color: '#0E85FF',
        }"
          @change="change"
      >
      </u-tabs>
    </u-sticky>
    <view  class="u-m-l-20 u-m-r-20 u-m-t-20">
      <uni-datetime-picker  v-model="queryParams.workDate" type="datetimerange" :clear-icon="true" @change="getOrgWorkerList"/>
    </view>
    <view v-if="orgWorkerList.length" class="wrap">
      <view>
          <u-list>
            <u-list-item
                v-for="(item, index) in orgWorkerList"
                :key="index"
            >
              <view class="content" @click="">
                <view class="u-flex u-m-t-30 u-m-b-30">
                  <view class="u-flex flex_1">工作日期：
                    <u-text type="success" :text="timestampToTime(item.workDate)" class="u-m-l-10" size="12"></u-text>
                  </view>
                  <view class="u-flex flex_1">工位：
                    <u-text type="primary" :text="item.orgName" class="u-flex" size="12"> </u-text>
                  </view>
                </view>
                <view class="u-flex u-m-b-30">
                  <view class="u-flex flex_1">班别：
                    <u-text type="success" :text="item.groupType" class="u-m-l-10" size="12"></u-text>
                  </view>
                  <view class="u-flex flex_1">工人：
                    <u-text type="primary" :text="item.workerName" class="u-m-l-10" size="12"></u-text>
                  </view>
                </view>
                <view class="u-m-t-10 u-m-b-20"><u-line/></view>
                <view class="u-flex justify-end">
                  <view class="u-m-r-20">
                    <u-button type="error" plain @click="handleDelete(item.id)">删除</u-button>
                  </view>
                </view>
              </view>
            </u-list-item>
          </u-list>
        </view>
      </view>
      <view v-else class="flex_1"> <u-empty icon="http://cdn.uviewui.com/uview/empty/data.png" /></view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
import tab from "@/plugins/tab";
import { deleteOrgWorker, getOrgWorkerPage } from "@/api/mes/deskArrangement";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { showConfirm } from "@/utils/common";
import { modal } from "@/plugins";
import { timestampToTime } from "@/utils/dateUtil";

const queryParams = ref({
  workDate: '',
  groupType: '',
  orgId: '',
  orgType: '',
  pageNo: 1,
  pageSize: 10
})

const menuList = ref([
  {
    name: '所有',
    value: ''
  },
  {
    name: '白班',
    value: '1'
  },
  {
    name: '夜班',
    value: '2'
  },
  {
    name: '长白班',
    value: '3'
  }
])

const show = ref(false)

const current = ref(0)
const change = (index)=>{
  current.value = index.index
  queryParams.groupType = menuList[current.value].value
}

const orgWorkerList = ref([])
const total = ref()
const getOrgWorkerList =  ()=> {
  getOrgWorkerPage(queryParams.value).then(response => {
    orgWorkerList.value = response.data.list
    total.value = response.data.total
  })
}

onReachBottom(()=>{
  if ((queryParams.value.pageNo - 1) * queryParams.value.pageSize >= total.value) {
    return
  }
  queryParams.value.pageNo++
  getOrgWorkerList()
})

const handleDelete = (id)=>{
  showConfirm("确认删除工作安排吗？").then(res => {
    if (res.confirm) {
      deleteOrgWorker(id).then(() => {
        queryParams.value.pageNo = 1
        orgWorkerList.value = [];
        getOrgWorkerList()
        modal.msgSuccess("操作成功")
      })
    }
  })
}

onLoad(() => {
  queryParams.value.orgId = tab.getParams().orgId
  getOrgWorkerList()
});

</script>
<style lang="sass" 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)
  padding-bottom: 20rpx

.wrap
  background-color: #f1f1f1
  padding: 20rpx
  font-size: 24rpx
  .content
    margin: 0 0 20rpx 0
    padding: 20rpx
    background-color: #ffffff
    border-radius: 10rpx

.flex_1
  flex: 1
</style>