mes-sdai-admin-backend-ui/src/view/performance/08-timesheet/index.vue

<template>
  <div>
    <layout>
      <layout-header>
        <!-- 按钮 -->
        <el-form inline>
          <el-form-item>
            <el-input
              v-model="searchInfo"
              placeholder="搜索产品编号或产品名称"
              clearable
              style="width: 180px;"
            />
            <el-button
              type="primary"
              icon="Search"
              class="search"
              @click="handleSearch"
            />

            <el-button
              type="primary"
              icon="edit"
              class="bt"
              @click="handleShowDetail"
            ><i class="el-icon-edit" />查改
            </el-button>

            <el-button
              type="primary"
              icon="edit"
              class="bt"
              @click="handleShowAdd"
            >新增
            </el-button>

          </el-form-item>
        </el-form>

        <!-- 弹出框 -->
        <div>
          <!-- 弹出框 -->
          <el-dialog
            v-model="dialogFormVisible"
            :before-close="closeDialog"
            :title="type === 'add' ? '新增' : '修改'"
            destroy-on-close
            width="800px"
          >
            <!-- <el-scrollbar height="500px"> -->
            <el-form
              id="detail-form"
              ref="elFormRef"
              :model="detailData"
              label-position="left"
              @keyup="moveFocus"
            >

              <!-- 日期 -->
              <el-row>
                <el-form-item
                  label="日期"
                  prop="name"
                >
                  <el-input
                    v-model="detailData.wgjs_rq"
                    style="width: 100px;"
                  />
                </el-form-item>
              </el-row>

              <!-- 标题栏 -->
              <el-row :gutter="10">
                <el-col :span="3">
                  <span>员工编号</span>
                </el-col>
                <el-col :span="3">
                  <span>员工姓名</span>
                </el-col>
                <el-col :span="3">
                  <span>计时</span>
                </el-col>
                <el-col :span="12">
                  <span>原因备注</span>
                </el-col>
                <el-col :span="3">
                  <span>冲月定额</span>
                </el-col>
              </el-row>

              <!-- 员工1 -->
              <el-row
                :gutter="5"
                style="margin-top: 10px;"
              >
                <el-col :span="3">
                  <el-input
                    v-model="detailData.wgjs_bh1"
                    :formatter="val => val.toUpperCase()"
                  />
                </el-col>
                <el-col :span="3">
                  <el-input
                    v-model="detailData.name1"
                    readonly
                  />
                </el-col>
                <el-col :span="3">
                  <el-input
                    v-model="detailData.wgjs_js1"
                  />
                </el-col>
                <el-col :span="12">
                  <el-input
                    v-model="detailData.wgjs_yy1"
                  />
                </el-col>
                <el-col :span="3">
                  <!-- <el-input
                    v-model="detailData.wgjs_冲定额1"

                  /> -->
                  <el-select
                    v-model="detailData.wgjs_冲定额1"
                    placeholder=" "
                  >
                    <el-option
                      label=""
                      value=""
                    />
                    <el-option
                      label="是"
                      value="是"
                    />
                  </el-select>
                </el-col>
              </el-row>

              <!-- 员工2 -->
              <el-row
                :gutter="5"
                style="margin-top: 10px;"
              >
                <el-col :span="3">
                  <el-input
                    v-model="detailData.wgjs_bh2"
                    :formatter="val => val.toUpperCase()"
                  />
                </el-col>
                <el-col :span="3">
                  <el-input
                    v-model="detailData.name2"
                    readonly
                  />
                </el-col>
                <el-col :span="3">
                  <el-input
                    v-model="detailData.wgjs_js2"
                  />
                </el-col>
                <el-col :span="12">
                  <el-input
                    v-model="detailData.wgjs_yy2"
                  />
                </el-col>
                <el-col :span="3">
                  <el-select
                    v-model="detailData.wgjs_冲定额2"
                    placeholder=" "
                  >
                    <el-option
                      label=""
                      value=""
                    />
                    <el-option
                      label="是"
                      value="是"
                    />
                  </el-select>
                </el-col>
              </el-row>

              <!-- 员工3 -->
              <el-row
                :gutter="5"
                style="margin-top: 10px;"
              >
                <el-col :span="3">
                  <el-input
                    v-model="detailData.wgjs_bh3"
                    :formatter="val => val.toUpperCase()"
                  />
                </el-col>
                <el-col :span="3">
                  <el-input
                    v-model="detailData.name3"
                    readonly
                  />
                </el-col>
                <el-col :span="3">
                  <el-input
                    v-model="detailData.wgjs_js3"
                  />
                </el-col>
                <el-col :span="12">
                  <el-input
                    v-model="detailData.wgjs_yy3"
                  />
                </el-col>
                <el-col :span="3">
                  <el-select
                    v-model="detailData.wgjs_冲定额3"
                    placeholder=" "
                  >
                    <el-option
                      label=""
                      value=""
                    />
                    <el-option
                      label="是"
                      value="是"
                    />
                  </el-select>
                </el-col>
              </el-row>

              <!-- 员工4 -->
              <el-row
                :gutter="5"
                style="margin-top: 10px;"
              >
                <el-col :span="3">
                  <el-input
                    v-model="detailData.wgjs_bh4"
                    :formatter="val => val.toUpperCase()"
                  />
                </el-col>
                <el-col :span="3">
                  <el-input
                    v-model="detailData.name4"
                    readonly
                  />
                </el-col>
                <el-col :span="3">
                  <el-input
                    v-model="detailData.wgjs_js4"
                  />
                </el-col>
                <el-col :span="12">
                  <el-input
                    v-model="detailData.wgjs_yy4"
                  />
                </el-col>
                <el-col :span="3">
                  <el-select
                    v-model="detailData.wgjs_冲定额4"
                    placeholder=" "
                  >
                    <el-option
                      label=""
                      value=""
                    />
                    <el-option
                      label="是"
                      value="是"
                    />
                  </el-select>
                </el-col>
              </el-row>

              <!-- 员工5 -->
              <el-row
                :gutter="5"
                style="margin-top: 10px;"
              >
                <el-col :span="3">
                  <el-input
                    v-model="detailData.wgjs_bh5"
                    :formatter="val => val.toUpperCase()"
                  />
                </el-col>
                <el-col :span="3">
                  <el-input
                    v-model="detailData.name5"
                    readonly
                  />
                </el-col>
                <el-col :span="3">
                  <el-input
                    v-model="detailData.wgjs_js5"
                  />
                </el-col>
                <el-col :span="12">
                  <el-input
                    v-model="detailData.wgjs_yy5"
                  />
                </el-col>
                <el-col :span="3">
                  <el-select
                    v-model="detailData.wgjs_冲定额5"
                    placeholder=" "
                  >
                    <el-option
                      label=""
                      value=""
                    />
                    <el-option
                      label="是"
                      value="是"
                    />
                  </el-select>
                </el-col>
              </el-row>

              <!-- 员工6 -->
              <el-row
                :gutter="5"
                style="margin-top: 10px;"
              >
                <el-col :span="3">
                  <el-input
                    v-model="detailData.wgjs_bh6"
                    :formatter="val => val.toUpperCase()"
                  />
                </el-col>
                <el-col :span="3">
                  <el-input
                    v-model="detailData.name6"
                    readonly
                  />
                </el-col>
                <el-col :span="3">
                  <el-input
                    v-model="detailData.wgjs_js6"
                  />
                </el-col>
                <el-col :span="12">
                  <el-input
                    v-model="detailData.wgjs_yy6"
                  />
                </el-col>
                <el-col :span="3">
                  <el-select
                    v-model="detailData.wgjs_冲定额6"
                    placeholder=" "
                  >
                    <el-option
                      label=""
                      value=""
                    />
                    <el-option
                      label="是"
                      value="是"
                    />
                  </el-select>
                </el-col>
              </el-row>

            </el-form>

            <template #footer>
              <div class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button
                  type="primary"
                  @click="enterDialog"
                >确 定</el-button>
              </div>
            </template>
          </el-dialog>

        </div>

      </layout-header>

      <layout>
        <!--    左侧树侧形结构-->
        <layout-sider
          :resize-directions="['right']"
          :width="220"
          style="margin-right: 10px;"
        >
          <div
            class="JKWTree-tree"
            style="height: 70vh;"
          >
            <h3>计件工计时单维护</h3>
            <el-tree
              :data="treeData"
              highlight-current="true"
              @node-click="handleNodeClick"
            />
          </div>

        </layout-sider>

        <layout-content>
          <!-- 数据展示 -->
          <el-table
            ref="table"
            style="width: 100%"
            tooltip-effect="dark"
            :data="tableData"
            row-key="ID"
            highlight-current-row
            border
            show-overflow-tooltip="true"
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '0px' }"
            :header-row-style="{ height: '20px' }"
            :header-cell-style="{ padding: '0px' }"
            @selection-change="handleSelectionChange"
            @row-dblclick="handleShowDetail"
            @row-click="Click"
            @current-change="(row, oldRow) => { currentRow = row}"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <!-- 循环渲染列 -->
            <el-table-column
              v-for=" column in tableColumns "
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
              :width="column.width"
            />

          </el-table>
          <!-- 分页 -->
          <div class="gva-pagination">
            <el-pagination
              v-model:current-page="page"
              v-model:page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 30, 50, 100]"
              :total="total"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </div>

        </layout-content>
      </layout>
    </layout>

  </div>
</template>

<script setup>
// 全量引入格式化工具 请按需保留
import { Layout, LayoutContent, LayoutHeader, LayoutSider } from '@arco-design/web-vue'
import { ElMessage, dayjs } from 'element-plus'
import { ref, reactive } from 'vue'
import { getSide, getTable, getDetail, updateData, getLocate, createData, getYg } from '@/api/mes_api_gty/timesheet'

defineOptions({
  name: '08Timesheet'
})

// 侧边栏数据请求
const treeData = reactive([])
const getSideData = async() => {
  const response = await getSide()
  if (response.code === 0) {
    const transformedData = response.data.map(item => ({
      label: item.date,
      params: {
        date: item.date.substring(0, 4) + '-' + item.date.substring(4),
      },
    }))
    treeData.splice(0, treeData.length, ...transformedData)
  }
}
getSideData()

const elFormRef = ref()
// const elSearchFormRef = ref()

// ============== 表格页面 ==============
const tableColumns = [
  { prop: 'wgjs_rq', label: '日期', width: 100 },
  { prop: 'wgjs_bh1', label: '员工编号1', width: 100 },
  { prop: 'name1', label: '姓名1', width: 100 },
  { prop: 'department', label: '所在部门', width: 100 },
  { prop: 'wgjs_js1', label: '计时1', width: 100 },
  { prop: 'wgjs_yy1', label: '原因1', width: 100 },
  { prop: 'wgjs_bh2', label: '员工编号2', width: 100 },
  { prop: 'name2', label: '姓名2', width: 100 },
  { prop: 'wgjs_js2', label: '计时2', width: 100 },
  { prop: 'wgjs_yy2', label: '原因2', width: 100 },
  { prop: 'wgjs_bh3', label: '员工编号3', width: 100 },
  { prop: 'name3', label: '姓名3', width: 100 },
  { prop: 'wgjs_js3', label: '计时3', width: 100 },
  { prop: 'wgjs_yy3', label: '原因3', width: 100 },
  { prop: 'wgjs_bh4', label: '员工编号4', width: 100 },
  { prop: 'name4', label: '姓名4', width: 100 },
  { prop: 'wgjs_js4', label: '计时4', width: 100 },
  { prop: 'wgjs_yy4', label: '原因4', width: 100 },
  { prop: 'wgjs_bh5', label: '员工编号5', width: 100 },
  { prop: 'name5', label: '姓名5', width: 100 },
  { prop: 'wgjs_js5', label: '计时5', width: 100 },
  { prop: 'wgjs_yy5', label: '原因5', width: 100 },
  { prop: 'wgjs_bh6', label: '员工编号6', width: 100 },
  { prop: 'name6', label: '姓名6', width: 100 },
  { prop: 'wgjs_js6', label: '计时6', width: 100 },
  { prop: 'wgjs_yy6', label: '原因6', width: 100 },
]
const table = ref(null)
const tableData = reactive([])
const page = ref(1)
const total = ref(0)
const limit = ref(10)
const searchInfo = ref('')
const params = {
  date: '',
  search: '',
  type: '',
}

const getTableData = async(params) => {
  const response = await getTable(params)
  if (response.code === 0) {
    total.value = response.data.total
    tableData.splice(0, tableData.length, ...response.data.rows)
    table.value?.setCurrentRow(tableData[0])
  }
}

// 搜索
const getLocateData = async(params) => {
  const res = await getLocate(params)
  if (res.code === 0) {
    total.value = res.data.total
    tableData.splice(0, tableData.length, ...res.data.rows)
    table.value?.setCurrentRow(tableData[0])
  }
}

// 分页设置
const handleSizeChange = () => {
  switch (params.type) {
    case 'getTableData':
      getTableData({ date: params.date, page: page.value.toString(), limit: limit.value.toString() })
      break
    case 'getLocateData':
      getLocateData({ date: params.date.replace('-', ''),
        search: params.search,
        page: page.value.toString(),
        limit: limit.value.toString() })
      break
    default:
      break
  }
}

// 页面跳转
const handleCurrentChange = () => {
  switch (params.type) {
    case 'getTableData':
      getTableData({ date: params.date, page: page.value.toString(), limit: limit.value.toString() })
      break
    case 'getLocateData':
      getLocateData({ date: params.date.replace('-', ''),
        search: params.search,
        page: page.value.toString(),
        limit: limit.value.toString() })
      break
    default:
      break
  }
}

const handleNodeClick = (node, check) => {
  if (node.params) {
    params.date = node.params.date
    params.type = 'getTableData'
    page.value = 1
    handleCurrentChange()
  }
}

// 搜索
function handleSearch() {
  params.search = searchInfo.value
  params.type = 'getLocateData'
  page.value = 1
  handleCurrentChange()
}

// ============== 详情页面 ==============
const detailData = reactive({})
const currentRow = ref()

// 行为控制标记（弹窗内部需要增还是改）
const type = ref('')
// 弹窗控制标记
const dialogFormVisible = ref(false)

// 查改
const handleShowDetail = async() => {
  type.value = 'update'
  const { wgjs_rq, wgjs_bh1 } = currentRow.value
  const res = await getDetail({ wgjs_rq, wgjs_bh1 })
  if (res.code === 0) {
    Object.assign(detailData, res.data)
    // dialogFormVisible.value = true
    showDialog()
  }
}

// 新增数据
const handleShowAdd = async() => {
  const { wgjs_rq, wgjs_bh1 } = currentRow.value
  const res = await getDetail({ wgjs_rq, wgjs_bh1 })
  if (res.code === 0) {
    type.value = 'add'
    Object.assign(detailData, res.data)

    detailData['wgjs_rq'] = dayjs().format('YYYY-MM-DD')

    // dialogFormVisible.value = true
    showDialog()
  }
}

// 更新数据
const enterDialog = async() => {
  if (type.value === 'update') {
    updateDetailData()
  } else if (type.value === 'add') {
    addDetailData()
  }
}
// 新增
const addDetailData = async() => {
  const restoredData = {
    wgjs_rq: detailData.wgjs_rq,
    wgjs_bh1: detailData.wgjs_bh1,
    wgjs_js1: detailData.wgjs_js1,
    wgjs_yy1: detailData.wgjs_yy1,
    wgjs_冲定额1: detailData.wgjs_冲定额1,

    wgjs_bh2: detailData.wgjs_bh2,
    wgjs_js2: detailData.wgjs_js2,
    wgjs_yy2: detailData.wgjs_yy2,
    wgjs_冲定额2: detailData.wgjs_冲定额2,

    wgjs_bh3: detailData.wgjs_bh3,
    wgjs_js3: detailData.wgjs_js3,
    wgjs_yy3: detailData.wgjs_yy3,
    wgjs_冲定额3: detailData.wgjs_冲定额3,

    wgjs_bh4: detailData.wgjs_bh4,
    wgjs_js4: detailData.wgjs_js4,
    wgjs_yy4: detailData.wgjs_yy4,
    wgjs_冲定额4: detailData.wgjs_冲定额4,

    wgjs_bh5: detailData.wgjs_bh5,
    wgjs_js5: detailData.wgjs_js5,
    wgjs_yy5: detailData.wgjs_yy5,
    wgjs_冲定额5: detailData.wgjs_冲定额5,

    wgjs_bh6: detailData.wgjs_bh6,
    wgjs_js6: detailData.wgjs_js6,
    wgjs_yy6: detailData.wgjs_yy6,
    wgjs_冲定额6: detailData.wgjs_冲定额6,
  }
  console.log(restoredData)
  const res = await createData(restoredData)

  console.log(res)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '新增成功',
    })
    dialogFormVisible.value = false
  }
}
// 修改
const updateDetailData = async() => {
  const obj = detailData
  for (let i = 1; i <= 6; i++) {
    delete obj[`name${i}`]
  }
  const res = await updateData(obj)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '更新成功'
    })
    params.type = 'getTableData'
    // page.value = 1
    handleCurrentChange()
    // if(response.code==0){
    // 		 ElMessage({
    // 		   type: 'success',
    // 		   message: '更新成功',
    // 		 })
    // }
    dialogFormVisible.value = false
  }
}

// 开启弹窗
const showDialog = () => {
  dialogFormVisible.value = true
  // 在 setTimeout 中获取元素，确保在 DOM 渲染完毕后执行
  setTimeout(() => {
    formElements = document.getElementById('detail-form').elements
    formElements[0].focus()
  }, 0)
}

// 关闭弹窗
const closeDialog = () => {
  dialogFormVisible.value = false
}

let formElements
const moveFocus = async(event) => {
  console.log(event)
  const index = Array.from(formElements).indexOf(event.target)
  const key = event.key
  event.preventDefault()

  // 切换焦点
  const focusNext = (step) => {
    const nextIndex = (index + step + formElements.length) % formElements.length
    formElements[nextIndex].focus()
  }

  switch (index) {
    case 1:
    case 6:
    case 11:
    case 16:
    case 21:
    case 26:
      if (key === 'ArrowDown') {
        formElements[index + 1].focus()
      } else if (key === 'ArrowUp') {
        formElements[index - 1].focus()
      } else if (key === 'Enter') {
        formElements[index + 1].focus()
        const sczl_bh = formElements[index]?.value
        if (sczl_bh === '') {
          detailData[`name${(index - 1) / 5 + 1}`] = ''
          break
        }
        const res = await getYg({ sczl_bh })
        if (res.code === 0) {
          const { data: { ygxm }} = res
          detailData[`name${(index - 1) / 5 + 1}`] = ygxm
        }
      }
      break

    default:
      if (key === 'ArrowDown') {
        focusNext(1)
      } else if (key === 'ArrowUp') {
        focusNext(-1)
      } else if (key === 'Enter') {
        focusNext(1)
      }
      break
  }
}

</script>

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

.JKWTree-tree {
  width: 100%;
  background-color: #fff;
  padding: 10px;
  margin-right: 20px;
}

.JKWTree-tree h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 10px 0;
}

.JKWTree-content {
  flex: 1;
}

/* 选中某行时的背景色 */
:deep(.el-table__body tr.current-row) > td {
  background: #ff80ff !important;
}
</style>

<style scoped>
:deep(.el-table td .cell) {
  line-height: 25px !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>