!20 工位安排

Merge pull request !20 from guopeiyu/guopeiyu

src/api/mes/deskArrangement.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+// 查询产线工位列表
+export function getListOrgWorker(params) {
+    return request({
+        url: '/admin-api/mes/organization/listOrgWorker',
+        method: 'GET',
+        params: params
+    })
+}
+
+// 获得班组成员
+export function getUserList2(params) {
+    return request({
+        url: '/admin-api/mes/work-team/work-team-detail/getUserList2',
+        method: 'GET',
+        params: params
+    })
+}
+
+// 多个日期新增工位安排
+export function createWorker(params) {
+    return request({
+        url: '/admin-api/mes/org-worker/createWorker',
+        method: 'GET',
+        params: params
+    })
+}
+
+// 查询工位安排分页
+export function getOrgWorkerPage(params) {
+    return request({
+        url: '/admin-api/mes/org-worker/page',
+        method: 'GET',
+        params: params
+    })
+}
+
+// 删除工位安排
+export function deleteOrgWorker(id) {
+    return request({
+        url: '/admin-api/mes/org-worker/delete?id='+id,
+        method: 'DELETE'
+    })
+}

src/api/system/dict/data.js

@@ -56,6 +56,13 @@ export const deviceTypes=[
   {text: '水表', value: '水表'},
   {text: '燃气表', value: '燃气表'},
 ]
+
+export const organizationalStatus=[
+  {text: '关闭', value: 'close'},
+  {text: '空闲', value: 'free'},
+  {text: '使用', value: 'inuse'},
+]
+
 export const isEnable=[
   {text: '是', value: true},
   {text: '否', value: false},

src/pages.json

@@ -70,6 +70,18 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/application/components/deskArrangementHandle",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/application/components/assigningWork",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/application/components/energyEquipment",
       "style": {

src/pages/application/components/assigningWork.vue

@@ -0,0 +1,140 @@
+<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-sticky>
+    <view class="container">
+      <!-- 自定义表单校验 -->
+      <uni-forms ref="customForm" :rules="customRules" labelWidth="80px" :modelValue="formData">
+        <uni-forms-item label="工位" required name="name">
+          <u-input v-model="name" placholder="请输入名称" disabled/>
+        </uni-forms-item>
+        <uni-forms-item  label="班别" required name="groupType">
+          <uni-data-checkbox v-model="formData.groupType" :localdata="groupTypes" @change="getUserList"/>
+        </uni-forms-item>
+        <uni-forms-item label="工作日期" required name="planDates">
+          <u-input v-model="formData.planDates" placeholder="请选择工作日期"  prefixIcon="calendar"  @click="show=true"></u-input>
+          <u-calendar :show="show" mode="multiple" @confirm="confirm" @close="show=false"></u-calendar>
+        </uni-forms-item>
+        <uni-forms-item v-if="formData.groupType" required label="工人"  name="workerId">
+          <uni-data-select  v-model="formData.workerId" :localdata="userList"/>
+        </uni-forms-item>
+      </uni-forms>
+      <view class="u-flex justify-end">
+        <view @click="submit()">
+          <u-button type="primary">
+            <uni-icons type="checkbox" class="u-m-r-10"/>
+            确定
+          </u-button></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onLoad, onReady } from "@dcloudio/uni-app";
+import tab from "@/plugins/tab";
+import modal from "@/plugins/modal";
+import { groupTypes } from "@/api/system/dict/data";
+import { createWorker, getUserList2 } from "@/api/mes/deskArrangement";
+
+const formData = ref({
+  orgId: undefined,
+  groupType: undefined,
+  workerId: undefined,
+  planDates: undefined,
+  orgType: undefined
+})
+
+const name = ref('')
+
+const userList = ref([])
+/** 工序类型变化，可选负责人跟着变化 */
+const getUserList = ()=>{
+  if(formData.value.orgId && formData.value.groupType) {
+    getUserList2({ orgId: formData.value.orgId, groupType: formData.value.groupType } ).then(response => {
+      userList.value = response.data
+      userList.value.forEach(user => {
+        user.text = user.nickname;
+        user.value = user.id;
+        delete user.nickname;
+        delete user.id;
+      });
+    })
+  }
+}
+const customForm = ref()
+// 自定义表单校验规则
+const customRules = ref({
+  groupType: { rules: [{ required: true, errorMessage: '班别不能为空'}]},
+  workerId: { rules: [{ required: true, errorMessage: '工人不能为空'}]},
+  planDates: { rules: [{ required: true, errorMessage: '工作日期不能为空'}]}
+})
+
+const submit = ()=>{
+  customForm.value.validate(async(valid)=>{
+    if(!valid){
+      // 日期格式化
+      for (let i = 0; i < formData.value.planDates.length; i++) {
+        const dateObj = new Date(formData.value.planDates[i]);
+        formData.value.planDates[i] = dateObj.toISOString().replace('T', ' ').split('.')[0];
+      }
+      await createWorker(formData.value)
+      modal.msgSuccess("保存成功")
+      await tab.navigateBack()
+      uni.$emit('success', true)
+    }
+  })
+}
+
+onReady(()=>{
+  // 设置自定义表单校验规则，必须在节点渲染完毕后执行
+  customForm.value.setRules(customRules.value)
+})
+
+const show = ref(false)
+const confirm = (e)=>{
+  formData.value.planDates = e
+  show.value = false
+}
+
+onLoad(() => {
+  name.value = tab.getParams().name
+  formData.value.orgId = tab.getParams().id
+  formData.value.orgType = tab.getParams().orgType
+  getUserList()
+});
+</script>
+
+<style scoped lang="sass">
+.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
+.container
+  padding: 20rpx
+  margin: 20rpx
+  background-color: #ffffff
+.uniui-checkbox:before
+  color: #ffffff
+.u-button
+  height: 70rpx
+:deep(.u-calendar-header)
+  padding: 40rpx
+:deep(.u-calendar-header__title)
+  display: block
+:deep(.u-calendar-month__title)
+  padding: 40rpx
+</style>

src/pages/application/components/deskArrangement.vue

@@ -12,14 +12,229 @@
           safe-area-inset-top
           placeholder
       />
+      <view class="u-flex u-flex-center u-m-20">
+        <u-input
+            v-model="queryParams.name"
+            placeholder="请输入组织名称"
+            border="surround"
+            :clear-icon="true"
+            suffixIcon="search"
+            font-size="12"
+            class="u-flex u-flex-center u-m-r-20"
+            @click="getOrgWorkerList"
+        />
+        <u-input
+            v-model="queryParams.machineId"
+            placeholder="请输入关联机台"
+            border="surround"
+            :clear-icon="true"
+            suffixIcon="search"
+            font-size="12"
+            @click="getOrgWorkerList"
+        />
+      </view>
+      <view class="u-flex u-flex-center u-m-l-20 u-m-r-20">
+        <uni-data-select v-model="queryParams.status" placeholder="请选择组织状态" :localdata="organizationalStatus" @click="getOrgWorkerList">
+        </uni-data-select>
+        <view class="u-m-l-20">
+          <u-button  @click="getOrgWorkerList" plain style="height: 35px; background: transparent">搜索</u-button>
+        </view>
+      </view>
     </u-sticky>
+    <view class="container">
+      <view class="u-menu-wrap">
+        <scroll-view scroll-y="" scroll-with-animation="" class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
+          <view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
+                :class="[current === index ? 'u-tab-item-active' : '']" :data-current="index"
+                @tap.stop="switchMenu(index)">
+            <text class="u-line-1">{{ item.text }}</text>
+          </view>
+        </scroll-view>
+      </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="tab.navigateTo('/pages/application/components/deskArrangementHandle', { orgId: item.id, orgType: item.name})">
+                <view class="u-flex u-m-t-30 u-m-b-30">
+                  <view class="u-flex flex_1">组织名称：
+                    <u-text type="success" :text="item.name" class="u-m-l-10" size="12"></u-text>
+                  </view>
+                  <view class="u-flex flex_1">组织等级：
+                    <u-text type="primary" :text="findTextByValue(orgClass, item.orgClass)" 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="findTextByValue(tabbar, item.orgType)" class="u-m-l-10" size="12"></u-text>
+                  </view>
+                  <view class="u-flex flex_1">今日工人：
+                    <u-text type="primary" :text="item.workerUserName" 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 v-if="item.orgClass==='workplace' && item.status==='free'" class="u-m-r-20" @click.stop="navigatorTo(item.orgType,  item.id,  item.name, item.workerUserName)"> <u-button type="error" plain>派工</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>
   </view>
 </template>
-<script lang="ts" setup>
+<script setup>
+import { ref } from 'vue'
+import { findTextByValue, organizationalStatus } from "@/api/system/dict/data";
+import tab from "@/plugins/tab";
+import { getListOrgWorker } from "@/api/mes/deskArrangement";
+import { onLoad } from "@dcloudio/uni-app";
+import { showConfirm } from "@/utils/common";
+
+const tabbar = ref([
+  { text: '所有', value: ''}, { text: '制浆', value: 'zhijiang'},{ text: '成型', value: 'chengxing'},{ text: '烘干', value: 'honggan'},{ text: '转移', value: 'zhuanyi'},{ text: '加湿', value: 'jiashi'},
+  { text: '热压',value: 'reya'},{ text: '切边',value: 'qiebian'},{ text: '品检',value: 'pinjian'},{ text: '打包',value: 'dabao'},{ text: '贴标',value: 'tiebiao'},{ text: '品印',value: 'pinyin'},{ text: '塑封',value: 'sufeng'}
+])
+
+const orgClass = ref([
+  { text: '工位', value: 'workplace'}, { text: '工序', value: 'process'}, { text: '产线', value: 'pipeline'}, { text: '车间', value: 'workshop'}, { text: '工厂', value: 'factory'}
+])
+
+const current = ref(0)
+const scrollTop = ref(0)
+const menuHeight = ref(0) // 左边菜单的高度
+const menuItemHeight = ref(0) // 左边菜单item的高度
+
+const switchMenu = async (index)=>{
+  if (index === current.value) return;
+  current.value = index;
+
+  // 将菜单菜单活动item垂直居中
+  scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
+  orgWorkerList.value = []
+  getOrgWorkerList()
+}
+// 获取一个目标元素的高度
+const getElRect = (elClass, dataVal) =>{
+  new Promise(() => {
+    const query = uni.createSelectorQuery().in(this);
+    query.select('.' + elClass).fields({ size: true }, res => {
+      // 如果节点尚未生成，res值为null，循环调用执行
+      if (!res) {
+        setTimeout(() => {
+          getElRect(elClass);
+        }, 10);
+        return;
+      }
+      this[dataVal] = res.height;
+    }).exec();
+  })
+}
+
+const queryParams = ref({
+  name: '',
+  machineId: '',
+  status: '',
+  orgType: '',
+  pageNo: 1
+})
+
+const orgWorkerList = ref([])
+const getOrgWorkerList =  ()=> {
+  queryParams.value.orgType = tabbar.value[current.value].value
+  getListOrgWorker(queryParams.value).then(response => {
+    orgWorkerList.value = response.data
+  })
+}
+
+const navigatorTo = (type, id, orgName, workerName)=>{
+  if(workerName != null && workerName.length > 0){
+    showConfirm("工位："+orgName+",今天已经派工，确定要重新派工吗？").then(
+    )
+  }
+  tab.navigateTo('/pages/application/components/assigningWork', { orgType: type, id: id, name: orgName })
+}
+
+onLoad(() => {
+  getOrgWorkerList()
+  uni.$on('success', data => {
+    if (data) {
+      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
+
+.container
+  margin: 10rpx
+  background-color: #f1f1f1
+  display: flex
+  flex-grow: 1
+
+.u-menu-wrap
+  display: flex
+  overflow: hidden
+
+.wrap
+  flex-grow: 1
+  background-color: #f1f1f1
+  padding: 0 0 20rpx 20rpx
+  font-size: 24rpx
+  .content
+    margin: 0 0 20rpx 0
+    padding: 20rpx
+    background-color: #ffffff
+    border-radius: 10rpx
+
+.flex_1
+  flex: 1
+
+.u-tab-view
+  width: 120rpx
+  height: 100%
+
+.u-tab-item
+  height: 110rpx
+  background: #f6f6f6
+  box-sizing: border-box
+  display: flex
+  align-items: center
+  justify-content: center
+  font-size: 26rpx
+  color: #444
+  font-weight: 400
+  line-height: 1
+
+.u-tab-item-active
+  position: relative
+  color: #000
+  font-size: 30rpx
+  font-weight: 600
+  background: #ffffff
+
+.u-tab-item-active::before
+  border-left: 4px solid #3c9cff
+  content: ""
+  position: absolute
+  height: 32rpx
+  left: 0
+  top: 39rpx
+
+.u-tab-view
+  height: 100%
+
+.u-button
+  height: 60rpx
 </style>

src/pages/application/components/deskArrangementHandle.vue

@@ -0,0 +1,167 @@
+<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="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";
+
+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>