mes-sdai-admin-backend-ui/src/view/performance/chukubaogong.vue

<template>
  <div>
    <layout>
      <layout-header>
        <div class="">
          <!--          按钮部分-->
          <el-form ref="elSearchFormRef"   class="demo-form-inline" :rules="searchRule" @keyup.enter="onSubmit">
            <el-form-item>
              <el-input v-model="searchInfo" placeholder="搜索" clearable style="width: 180px;"></el-input>
              <el-button type="primary" icon="search" @click="onSubmit" 
			  style="margin: 0px 5px 0px 0px;width: 80px;height:40px;border-radius: 5%;">查询</el-button>
			  <el-button type="primary"  @click="onAttendance" 
			  style="margin: 0px 5px 0px 0px;width: 80px;height:40px;border-radius: 5%;">新增</el-button>
              <el-button type="primary"  @click="baogong_del" 
			  style="margin: 0px 5px 0px 0px;width: 80px;height:40px;border-radius: 5%;float: right;background-color: red">删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </layout-header>

      <layout>
        <!--左侧树侧形结构-->
        <layout-sider :resize-directions="['right']" :width="190" style="margin-right: 10px;">
          <div class="JKWTree-tree" style="height: 200px">
            <h3>出库报工</h3>
            <el-tree :data="treeData" class="treecolor"   @node-click="handleNodeClick"></el-tree>
          </div>
        </layout-sider>

        <!-- 右侧区域 -->
        <layout-content >
        <el-main>
          <div class="gva-table-box">
            <!-- 表格数据 -->
           <el-table ref="multipleTable" style="width: 100%;height: 65vh" tooltip-effect="dark"
                      :row-style="{ height: '20px' }"  :header-cell-style="{ padding: '0px' }"
                      :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                      :data="tableData"  border row-key="ID"
                      size="small" 
                      highlight-current-row="true" @row-dblclick="updateCompanyFunc"
                      @row-click="tableRowClick" :show-overflow-tooltip="true"
                      @selection-change="handleSelectionChange">
			  <el-table-column type="selection" width="55" />
              <el-table-column  sortable align="center" label="序号" prop="序号"  width="100" />
1              <el-table-column  sortable  align="center" label="订单号" prop="订单号" width="150"/>
              <el-table-column  sortable  align="left" label="生产款号" prop="生产款号" width="150" />
              <el-table-column  sortable  align="left" label="款式" prop="款式" width="150" />
              <el-table-column  sortable  align="left" label="颜色" prop="颜色" width="150"  />
              <el-table-column  sortable  align="left" label="工序" prop="工序" width="150" />
              <el-table-column  sortable  align="left" label="面料出库人" prop="面料出库人" width="150" />
              <el-table-column  sortable  align="left" label="日期" prop="日期" width="160" />
            </el-table>
            <!-- 分页 -->
            <div class="gva-pagination">
              <el-pagination layout="total" :current-page="page" :page-size="pageSize"
               :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
<!--              <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]"-->
<!--                             :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />-->
            </div>
          </div>

          <!-- 修改弹窗 -->
			<el-dialog v-model="dialogFormVisible" :before-close="edit_closeDialog"  destroy-on-close style="width: 60%; height: 70%;">
				<h1 style="margin: 0%;margin-bottom: 10px;">出库报工修改</h1>
				<el-row :gutter="24"  style="margin-bottom: 20px;">
					<el-col :span="10">
						<el-form-item label="订单号:" prop="deliveryDate" class="mab" label-width="80px" style="font-size: 20px; margin: 10px;">
							<el-input v-model="edit_formData['订单号']" style="width: 70%; height: 40px;" id="订单号:" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="生产款号:" prop="deliveryDate" class="mab" label-width="120px" style="font-size: 20px; margin: 10px;">
							<el-input v-model="edit_formData['生产款号']" style="width: 70%; height: 40px;" id="生产款号" />
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="24"  style="margin-bottom: 20px;">
					<el-col :span="10">
						<el-form-item label="款式:" prop="deliveryDate" class="mab" label-width="80px" style="font-size: 20px; margin: 10px;">
							<el-input v-model="edit_formData['款式']" style="width: 70%; height: 40px;" id="款式" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="颜色:" prop="deliveryDate" class="mab" label-width="120px" style="font-size: 20px; margin: 10px;">
							<el-input v-model="edit_formData['颜色']" style="width: 70%; height: 40px;" id="颜色" />
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="24"  style="margin-bottom: 20px;">
					<el-col :span="10">
						<el-form-item label="工序:" prop="deliveryDate" class="mab" label-width="80px" style="font-size: 20px; margin: 10px;">
							<el-input v-model="edit_formData['工序']" style="width: 70%; height: 40px;" id="工序" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="面料出库人:" prop="deliveryDate" class="mab" label-width="120px" style="font-size: 20px; margin: 10px;">
							<el-input v-model="edit_formData['面料出库人']" style="width: 70%; height: 40px;" id="面料出库人" />
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="24"  style="margin-bottom: 20px;">
					<el-col :span="10">
						<el-form-item label="日期:" prop="deliveryDate" class="mab" label-width="80px" style="font-size: 20px; margin: 10px;">
							<el-input v-model="edit_formData['日期']" style="width: 70%; height: 40px;" id="日期" />
						</el-form-item>
					</el-col>
				</el-row>

				<template #footer>
					<div class="dialog-footer">
						<el-button @click="edit_closeDialog"  style="width: 110px;height: 60px;font-size: 20px;">取消</el-button>
						<el-button type="primary" @click="edit_Dialog"  style="width: 110px;height: 60px;font-size: 20px;">确认</el-button>
					</div>
				</template>
			</el-dialog>


		 <!-- 新增弹窗 -->
		  <el-dialog v-model="AttendanceVisible"  destroy-on-close  style="width: 100%;height: 100%;margin: 0px;">
			  <h1 style="margin: 0%;margin-bottom: 10px;">新增</h1>
		      <el-row :gutter="24" style="margin-bottom: 20px;">
		          <el-input v-model="add_searchInfo" placeholder="扫描订单二维码获取订单信息" 
			  				  @keyup.enter="add_onSubmit"
							  id="searchInput" 
			  				  style="width: 270px;margin: 5px;height: 50px;">
			  				  </el-input>
			      <el-button type="primary" icon="search" @click="add_onSubmit" style="margin: 5px;height: 50px;">查询</el-button>
				  
				  <el-form-item label="日期:" prop="deliveryDate" class="mab" label-width="100" style="font-size: 30px;margin: 10px;">
				      <el-date-picker v-model="add_riqiformData['日期']" type="date" style="width: 150px;height: 40px;"/>
				  </el-form-item>
				  
		      </el-row>
		      
		      <el-row :gutter="24" style="margin-bottom: 50px;">
		          <el-table ref="multipleTable" style="width: 100%;height: 54vh" tooltip-effect="dark"
		                    :row-style="{ height: '50px' }" :header-cell-style="{ padding: '5px' }"
		                    :cell-style="{ padding: '10px' }" :header-row-style="{ height: '20px' }"
		                    :data="add_tableData" border row-key="ID"
		                    size="small" highlight-current-row="true" @row-dblclick="add_updateCompanyFunc"
		                    @row-click="add_tableRowClick" :show-overflow-tooltip="true"
		                    @selection-change="handleSelectionChange">
		              <el-table-column sortable align="left" label="订单号" prop="订单号" width="270"/>
		              <el-table-column sortable align="left" label="生产款号" prop="生产款号" width="305"/>
		              <el-table-column sortable align="left" label="款式" prop="款式" width="270"/>
		              <el-table-column sortable align="left" label="颜色" prop="颜色" width="270"/>
		          </el-table>
		      </el-row>
		      <template #footer>
		          <div class="dialog-footer">
		              <el-button @click="add_closeDialog"  style="width: 110px;height: 60px;font-size: 20px;">取消</el-button>
		              <el-button type="primary" @click="add_Dialog"  style="width: 110px;height: 60px;font-size: 20px;">确认出库</el-button>
		          </div>
		      </template>
		  </el-dialog>


        </el-main>
      </layout-content>
      </layout>
    </layout>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      formDataTest: {
        imageUrl: '' // 添加一个字段来保存上传的图片路径
      },
      rule: {} // 初始化rule对象
    };
  },
  methods: {
    handleKeyDown(event, currentId, prevId, nextId) {
      const currentElement = document.getElementById(currentId);
      const isEmpty = currentElement.value === '';
      const atStart = currentElement.selectionStart === 0;
      const atEnd = currentElement.selectionStart === currentElement.value.length;
      switch (event.keyCode) {
        case 13: // Enter
        case 40: // 向下箭头
          if (nextId) {
            document.getElementById(nextId).focus();
          }
          break;
        case 38: // 向上箭头
          if (prevId) {
            document.getElementById(prevId).focus();
          }
          break;
        case 8: // 删除键
          if (prevId && (isEmpty || atStart)) {
            document.getElementById(prevId).focus();
          }
          break;
        case 37: // 向左箭头
          if (prevId && atStart) {
            document.getElementById(prevId).focus();
          }
          break;
        case 39: // 向右箭头
          if (nextId && atEnd) {
            document.getElementById(nextId).focus();
          }
          break;
        default:
          break;
      }
    },
    closeDialog() {
      // 关闭对话框的逻辑
      this.dialogFormVisible = false;
    },
    enterDialog() {
      // 确定按钮的逻辑
      // 在这里可以执行提交表单的逻辑
    },
    handleFileUpload(event) {
      // 处理文件上传逻辑
      const file = event.target.files[0];
      console.log(file)
      // 模拟上传并保存文件路径
      // 在实际应用中，您需要将文件上传到服务器并保存路径
      this.formDataTest.imageUrl = URL.createObjectURL(file);
      // 手动触发Vue的更新
      this.$forceUpdate();
    }
  }
};
</script>
<script setup>
// 全量引入格式化工具 请按需保留
import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';

import {ref, reactive} from 'vue'
import {getCustom, getDepartment, getProductData,getStaffInfo, getStaffList, ygjbzledit,clockUpdate} from '@/api/yunyin/yunying'
import {ElMessage} from "element-plus";
defineOptions({name: 'Company'})

// =========== 获取左侧树侧形结构 ===========
const treeData = ref({})
const DataListdata = async () => {
  try {
    const data = 
    [
      {label : '2024.7.16'},
      {label : '2024.7.15'},
      {label : '2024.7.14'},
      {label : '2024.7.13'},
      {label : '2024.7.12'},
      {label : '2024.7.11'}
    ];
    treeData.value = data
  } catch (error) {
    console.error(error);
  }
};
DataListdata();

//点击左侧树形 获取右侧table列表
const tableData = reactive([]);
const _u8 = ref(null);  // U8系统的值
const _mes = ref(null); // MES系统的值
const handleNodeClick = async (node) => {
  _getStaffList();  // 执行获取员工列表的函数
};

//点击管理中心 显示部门的全部数据
const handleNodeExpand = async (node) => {
  // _department_code.value = node['编号'];
  searchInfo.value = '';
  _getStaffList()
}

// =========== 搜索 ===========
const searchInfo = ref('')
const _department_code = ref(null)
//点击【查询】按钮
const onSubmit = () => {
  _department_code.value = '';
  if(searchInfo.value === ''){
    tableData.length = 0;
  }else{
    _getStaffList();
  }
};

//获取员工信息列表
const _getStaffList = async ()=>{
	console.log(123)
    try {
		const WorkListdata = [
		    {
		      '序号':'1',
		      '订单号':'2408001',
		      '生产款号':'2403-1622款',
		      '款式':'连衣裙',
		      '颜色':'红色',
		      '工序':'仓库出库',
		      '面料验片人':'xxx',
		      '日期':'2024-07-16'
		    },
		    {
		      '序号':'2',
		      '订单号':'2408002',
		      '生产款号':'2403-1622款',
		      '款式':'裤子',
		      '颜色':'蓝色',
		      '工序':'仓库出库',
		      '面料验片人':'xxx',
		      '日期':'2024-07-16'
		    },
			{
			  '序号':'3',
			  '订单号':'2408003',
			  '生产款号':'2403-1622款',
			  '款式':'西服',
			  '颜色':'黑色 ',
			  '工序':'仓库出库',
			  '面料验片人':'xxx',
			  '日期':'2024-07-16'
			},
		];
		console.log(WorkListdata)
		tableData.splice(0,tableData.length,...WorkListdata);//表格数据
		// total.value =WorkListdata.data.total;//共多少条
  } catch (error) {
    console.error(error);
  }
}

// =========== 新增按钮 ===========
const AttendanceVisible=ref(false)
const add_tableData = reactive([]);
// 获取当前日期
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要补零
const day = String(today.getDate()).padStart(2, '0');
const hours = String(today.getHours()).padStart(2, '0');
const minutes = String(today.getMinutes()).padStart(2, '0');
const seconds = String(today.getSeconds()).padStart(2, '0');
const currentDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

//新增按钮
const onAttendance = () => {
    AttendanceVisible.value=true
	setTimeout(() => {
	    const inputElement = document.querySelector('#searchInput');
	    if (inputElement) {
	        inputElement.focus();
	    }
	}, 100); // 延迟100毫秒
	add_riqiformData['日期'] = currentDate
};
const add_riqiformData = reactive({
  日期: '',
});
// 新增确定
const add_Dialog = () => {
   AttendanceVisible.value = false
};
// 新增取消
const add_closeDialog = () => {
    AttendanceVisible.value = false
};

// =========== 新增搜索 ===========
const add_searchInfo = ref('')
//点击【查询】按钮
const add_onSubmit = async ()=>{
	
  if(add_searchInfo.value === '' || add_searchInfo.value === undefined){
	const WorkListdata = [];
	add_tableData.splice(0,add_tableData.length,...WorkListdata);
    ElMessage({type: 'warning',message: '搜索内容不能为空' })
  }else{
	console.log(add_searchInfo.value)
	if(add_searchInfo.value === '2408001'){
		const WorkListdata = [
		    {
			  '订单子编号':'2408001-1',
		      '订单号':'2408001',
		      '生产款号':'2401-1622款',
		      '款式':'连衣裙',
		      '颜色':'红色'
		    },
			{
			  '订单子编号':'2408001-2',
			  '订单号':'2408001',
			  '生产款号':'2401-1623款',
			  '款式':'长袖',
			  '颜色':'蓝色'
			},
		];
		add_tableData.splice(0,add_tableData.length,...WorkListdata);//表格数据
	}else if(add_searchInfo.value === '2408002'){
		const WorkListdata = [
		    {
			  '订单子编号':'2408002-2',
		      '订单号':'2408002',
		      '生产款号':'2402-1624款',
		      '款式':'西服',
		      '颜色':'白色'
		    },
		];
		add_tableData.splice(0,add_tableData.length,...WorkListdata);//表格数据
	}else if(add_searchInfo.value === '2408003'){
		const WorkListdata = [
		    {
			  '订单子编号':'2408003-3',
		      '订单号':'2408003',
		      '生产款号':'2403-1625款',
		      '款式':'西服',
		      '颜色':'白色'
		    },
		];
		add_tableData.splice(0,add_tableData.length,...WorkListdata);//表格数据
	}
	add_searchInfo.value  = '';
	setTimeout(() => {
	    const inputElement = document.querySelector('#searchInput');
	    if (inputElement) {
	        inputElement.focus();
	    }
	}, 100); // 延迟100毫秒
  }
};
// =========== 删除按钮 ===========
const bgSelection = ref(null)
const baogong_del = () => {
	if(bgSelection.value === null || bgSelection.value === ''){
		  ElMessage({type: 'warning',message: '请选择删除的数据' })
	}else{
		 console.log(bgSelection.value)
	}
}
// 复选框
const handleSelectionChange = (selection, type) => {
  const ids = selection.map(item => {
    return item.订单子编号
  })
  bgSelection.value = ids.join(',')
}

// =========== 修改 ===========
const dialogFormVisible = ref(false)
const edit_formData = ref({})
// 双击修改
const updateCompanyFunc = async (row) => {
	console.log(row)
	dialogFormVisible.value = true;
	Object.assign(edit_formData.value,row);
};
// 修改确认
const edit_Dialog = async (row) => {
	dialogFormVisible.value = false;
};
// 修改取消
const edit_closeDialog = async (row) => {
	dialogFormVisible.value = false;
};
// =========== 分页 ===========
// 分页相关的响应式变量
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
// 分页
const handleCurrentChange = (val) => {
  page.value = val;
  _getStaffList();
};

// 修改页面容量 点击多少条/页
const handleSizeChange = (val) => {
  page.value = 10;//默认显示
  pageSize.value = val;
  _getStaffList();
};


//修改
const formDataTest = ref({})


const Attendancevalue = ref({})
//考勤建立弹窗确定
 const AttendanceDialog = async () => {
  _clockUpdate()
 }
 //设置法定天数
 const _clockUpdate = async ()=>{
   const formattedData = {
    month:Attendancevalue.value['month'],
	number:Attendancevalue.value['day'],
	typeA:Attendancevalue.value['typeA'],
	typeB:Attendancevalue.value['typeB'],
	typeC:Attendancevalue.value['typeC'],
	sys_id:'[1010/郑梅芳]'
   };
   console.log(formattedData)
   const response = await clockUpdate(formattedData);
   if (response.code === 0) {
    	  ElMessage({
    	    type: 'success',
    	    message: '成功'
    	  })
		 AttendanceVisible.value=false
    }else{
   	   ElMessage({
   	     type: 'error',
   	     message: '失败'
   	   })
    }
 }
 //获取小时数
 const getdays = () => {
	 console.log(Attendancevalue.value['day'])
 	if(Attendancevalue.value['day']!=''){
		Attendancevalue.value['typeA']=Attendancevalue.value['day']*7.5
		Attendancevalue.value['typeB']=Attendancevalue.value['day']*8
		Attendancevalue.value['typeC']=Attendancevalue.value['day']*8
	}else{
		ElMessage({
		  type: 'error',
		  message: '请输入法定天数'
		})
	}
 }
// 修改关闭弹窗
const closeDialog = () => {dialogFormVisible.value = false,AttendanceVisible.value=false}

// 弹窗确定
const enterDialog = async () => {
	console.log(formDataTest.value['出生日期'])
	if(formDataTest.value['出生日期'] === '' || formDataTest.value['出生日期'] === null){
		ElMessage({
		  type: 'error',
		  message: '出生日期不能为空'
		})
		return false;
	}
	if(formDataTest.value['身份证号'] === '' || formDataTest.value['身份证号'] === null){
		ElMessage({
		  type: 'error',
		  message: '身份证号不能为空'
		})
		return false;
	}
  _ygjbzledit();
}
//修改员工资料
const _ygjbzledit = async ()=>{
  const formattedData = {
    '员工编号': formDataTest.value['员工编号'],
    '员工姓名': formDataTest.value['员工姓名'],
    '性别': formDataTest.value['性别'],
    '出生日期': formDataTest.value['出生日期'],
    '身份证号': formDataTest.value['身份证号'],
    '职称职务': formDataTest.value['职称职务'],
    '所在部门': formDataTest.value['所在部门'],
    '聘用日期': formDataTest.value['聘用日期'],
    '转正日期': formDataTest.value['转正日期'],
    '扣减司龄': formDataTest.value['扣减司龄'] ? formDataTest.value['扣减司龄'] : '0',
    '人员类别': formDataTest.value['人员类别'],
    '人员性质': formDataTest.value['人员性质'],
    '班次类型': formDataTest.value['班次类型'],
    '薪酬核算分组': formDataTest.value['薪酬核算分组'],
    '工资表类别': formDataTest.value['工资表类别'],
    'U8在职': formDataTest.value['U8在职'],
    '在职状态': formDataTest.value['在职状态'],
    '部门编码': formDataTest.value['部门编码'],
  };
  try {
    const ygjbzledit_eddt = await ygjbzledit(formattedData);
    if (ygjbzledit_eddt .code === 0) {
      dialogFormVisible.value = false;
      ElMessage({type: 'success',message: '更新成功'})
    } else {
      console.log(ygjbzledit_eddt);
      ElMessage({ type: 'error',message: '更新失败'})
    }
  } catch (error) {
    console.error(error);
  }
}

</script>

<style scoped>
.form-container {
  display: flex;
  flex-wrap: wrap;
}

.form-column {
  /*flex: 1;*/
  margin-right: 15px; /* 调整列之间的间距 */
}

/* 左侧输入框宽度调整 */
.form-column .el-form-item .el-input {
  width: 150px; /* 调整左侧输入框的宽度 */
}

/* 媒体查询，根据需要调整断点 */
@media screen and (max-width: 768px) {
  .form-column {
    flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
    margin-right: 0;
  }
}
/*:deep(.el-table td .cell) {*/
/*  line-height: 30px !important;*/
/*}*/
.JKWTree-container {
  display: flex;
}
.JKWTree-tree {
  /*width: 300px;*/
  background-color: #fff;
  padding: 10px;
  margin-right: 20px;
}
.JKWTree-tree h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 10px 0;
}
.JKWTree-content {
  flex: 1;
}
/* 图片上传 */
.upload-box {
  width: 200px;
  height: 200px;
  border: 2px dashed #e2e2e2;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upload-icon {
  font-size: 40px;
  color: #c0c4cc;
}
.file-input {
  display: none;
}
.el-table .warning-row {
  background: oldlace;
}

/* 选中某行时的背景色 */
:deep(.el-table__body tr.current-row) > td {
  background: #ff80ff !important;
}
</style>
<style scoped>
:deep(.el-table td .cell) {
  line-height: 20px !important;
}
:deep(.el-tabs__header){
  margin-bottom: 0;
}
.search{
  margin-left: 0px !important;
  margin-right: 10px !important;
}
.bt{
  margin-left: 2px !important;
  padding: 3px !important;
  font-size: 12px;
}
.el-tabs__header{
  margin: 0px !important;
}
.gva-table-box{
  padding: 0px !important;
}
.mab{
  margin-bottom: 5px;
}
</style>