|
|
@@ -1,813 +1,916 @@
|
|
|
-<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"
|
|
|
- destroy-on-close
|
|
|
- width="800px"
|
|
|
- >
|
|
|
- <!-- <el-scrollbar height="500px"> -->
|
|
|
- <el-form
|
|
|
- id="detail-form"
|
|
|
- ref="elFormRef"
|
|
|
- :model="detailData"
|
|
|
- label-position="left"
|
|
|
- inline
|
|
|
- @keyup="moveFocus"
|
|
|
- >
|
|
|
- <el-form-item
|
|
|
- label="员工编号"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="detailData.Sczl_bh1"
|
|
|
- style="width: 100px"
|
|
|
- @keyup.enter="handleYgbhEnter"
|
|
|
- />
|
|
|
- <el-input
|
|
|
- v-model="detailData.name"
|
|
|
- style="width: 100px; margin-left: 5px"
|
|
|
- readonly
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <br>
|
|
|
-
|
|
|
- <el-form-item
|
|
|
- label="工序类别"
|
|
|
- >
|
|
|
- <el-select
|
|
|
- v-model="detailData.sczl_Type"
|
|
|
- style="width: 150px"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- label="拆片"
|
|
|
- value="拆片"
|
|
|
- />
|
|
|
- <el-option
|
|
|
- label="包装"
|
|
|
- value="包装"
|
|
|
- />
|
|
|
- <el-option
|
|
|
- label="打包"
|
|
|
- value="打包"
|
|
|
- />
|
|
|
- <el-option
|
|
|
- label="拉料"
|
|
|
- value="拉料"
|
|
|
- />
|
|
|
-
|
|
|
- </el-select>
|
|
|
-
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item
|
|
|
- label="日期"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- type="date" max="9999-12-31"
|
|
|
- v-model="detailData.Sczl_rq"
|
|
|
- style="width: 150px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item
|
|
|
- label="工单编号"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="detailData.sczl_gdbh"
|
|
|
- style="width: 100px"
|
|
|
- @keyup.enter="handleGdbhEnter"
|
|
|
- />
|
|
|
- <el-input
|
|
|
- v-model="detailData.Gd_cpmc"
|
|
|
- style="width: 400px; margin-left: 5px"
|
|
|
- readonly
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item
|
|
|
- label="工艺流程"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="detailData.Sczl_gxmc"
|
|
|
- style="width: 300px"
|
|
|
- @keyup.enter="handleGylcEnter"
|
|
|
- />
|
|
|
- <el-input
|
|
|
- v-model="detailData.sczl_gxh"
|
|
|
- style="width: 100px; margin-left: 5px"
|
|
|
- readonly
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <br>
|
|
|
-
|
|
|
- <el-form-item
|
|
|
- v-if="type === '新增'"
|
|
|
- label=""
|
|
|
- style="margin-left: 67px;"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="leftData"
|
|
|
- style="width: 100px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item
|
|
|
- v-if="type === '新增'"
|
|
|
- label="X"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="rightData"
|
|
|
- style="width: 100px;margin-left: 12px;"
|
|
|
- @keyup.enter="()=>{detailData.Sczl_cl = (leftData * rightData).toString()}"
|
|
|
- @keyup.down="()=>{detailData.Sczl_cl = (leftData * rightData).toString()}"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item
|
|
|
- v-if="type === '新增'"
|
|
|
- label="计件产量"
|
|
|
- style="margin-left: 30px;"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="detailData.Sczl_cl"
|
|
|
- style="width: 100px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item
|
|
|
- v-if="type === '查改'"
|
|
|
- label="计件产量"
|
|
|
- style="margin-left: 400px;"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="detailData.Sczl_cl"
|
|
|
- style="width: 100px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item
|
|
|
- label="工价代号"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="detailData.sys_bh"
|
|
|
- style="width: 200px"
|
|
|
- @keyup.enter="handleGjdhEnter"
|
|
|
- />
|
|
|
- <el-input
|
|
|
- v-model="detailData.sys_mc"
|
|
|
- style="width: 300px; margin-left: 5px"
|
|
|
- readonly
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item
|
|
|
- label="票号备注"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="detailData.Sczl_desc"
|
|
|
- style="width: 505px"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- </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>
|
|
|
-
|
|
|
- <!-- 工价代号弹窗 -->
|
|
|
- <el-dialog
|
|
|
- v-model="dialogDedh"
|
|
|
- :before-close="()=>{dialogDedh = false}"
|
|
|
- title="工价代号"
|
|
|
- destroy-on-close
|
|
|
- >
|
|
|
-
|
|
|
- <el-scrollbar
|
|
|
- style="height: 50vh;width: 50vw;"
|
|
|
- >
|
|
|
- <el-tree
|
|
|
- :data="dedhTreeData"
|
|
|
- highlight-current
|
|
|
- style="width: 90%;"
|
|
|
- @node-click="handleSelectDjdh"
|
|
|
- />
|
|
|
- </el-scrollbar>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- <!-- 工艺流程弹窗 -->
|
|
|
- <el-dialog
|
|
|
- v-model="dialogGylc"
|
|
|
- :before-close="()=>{dialogGylc = false}"
|
|
|
- title="工艺流程"
|
|
|
- destroy-on-close
|
|
|
- style="width: 50%px; "
|
|
|
-
|
|
|
- @keydown="selectGX($event)"
|
|
|
- >
|
|
|
-
|
|
|
- <!-- <el-scrollbar
|
|
|
- style="height: 50vh;width: 50vw;"
|
|
|
- >
|
|
|
- <el-tree
|
|
|
- :data="gylcTreeData"
|
|
|
- highlight-current
|
|
|
- style="width: 90%;"
|
|
|
- @node-click="handleSelectGylc"
|
|
|
- node-key="id"
|
|
|
- />
|
|
|
- </el-scrollbar> -->
|
|
|
-
|
|
|
- <el-table tooltip-effect="dark" :data="selectData" row-key="ID"
|
|
|
- highlight-current-row="true" border style="width:240px" height="500px"
|
|
|
- @row-dblclick="handleSelectClick" ref="table2" >
|
|
|
- <el-table-column prop="jyGx" label="检验工序" width="200" />
|
|
|
- </el-table>
|
|
|
-
|
|
|
- </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
|
|
|
- @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"
|
|
|
- @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"
|
|
|
- sortable
|
|
|
- />
|
|
|
-
|
|
|
- </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, getYg, getGdmc, getDedh, getGxMc, updateData, add } from '@/api/mes_api_gty/otherDocuments'
|
|
|
-import { useUserStore } from '@/pinia/modules/user'
|
|
|
-const userStore = useUserStore()
|
|
|
-const sys_id='['+userStore.userInfo.userName+'/'+userStore.userInfo.nickName+']'
|
|
|
-defineOptions({
|
|
|
- name: '07OtherDocuments'
|
|
|
-})
|
|
|
-
|
|
|
-// 侧边栏数据请求
|
|
|
-const treeData = reactive([])
|
|
|
-const getSideData = async() => {
|
|
|
- const response = await getSide()
|
|
|
- if (response.code === 0) {
|
|
|
- const transformedData = response.data.map(item => ({
|
|
|
- label: `${item.date.replace(/-/g, '.')}【产量合计: ${item.counts}】`,
|
|
|
- children: item.sys.map(sysItem => ({
|
|
|
- label: `${sysItem.Sczl_bh1}(${sysItem.name}) 【产量合计: ${sysItem.count}】`,
|
|
|
- params: {
|
|
|
- date: item.date.substring(0, 4) + '-' + item.date.substring(4),
|
|
|
- Sczl_bh1: sysItem.Sczl_bh1,
|
|
|
- },
|
|
|
- })),
|
|
|
- }))
|
|
|
- treeData.splice(0, treeData.length, ...transformedData)
|
|
|
- }
|
|
|
-}
|
|
|
-getSideData()
|
|
|
-
|
|
|
-const elFormRef = ref()
|
|
|
-
|
|
|
-// ============== 表格页面 ==============
|
|
|
-const tableColumns = [
|
|
|
- { prop: 'sczl_Type', label: '计件类型', width: '120' },
|
|
|
- { prop: 'Sczl_rq', label: '日期', width: '100' },
|
|
|
- { prop: 'Sczl_bh1', label: '员工编号', width: '120' },
|
|
|
- { prop: 'name', label: '员工姓名', width: '120' },
|
|
|
- { prop: 'sczl_gdbh', label: '工单编号', width: '120' },
|
|
|
- { prop: 'Gd_cpmc', label: '产品名称', width: '300' },
|
|
|
- { prop: 'Sczl_cl', label: '产量', width: '100' },
|
|
|
- { prop: '', label: '千件工价', width: '120' }, // prop 属性值需要补充
|
|
|
- { prop: 'sys_mc', label: '工价备注', width: '200' }, // prop 属性值需要补充
|
|
|
- { prop: 'Sczl_desc', label: '备注', width: '100' },
|
|
|
- { prop: 'Sczl_gxmc', label: '工序名称', width: '120' },
|
|
|
- { prop: 'sczl_yjno', label: '印件号', width: '100' },
|
|
|
- { prop: 'sczl_gxh', label: '工序号', width: '100' },
|
|
|
- { prop: 'sys_id', label: '创建用户', width: '150' },
|
|
|
- { prop: 'sys_rq', label: '创建时间', width: '200' },
|
|
|
- { prop: 'mod_rq', label: '修改时间', width: '200' },
|
|
|
- { prop: 'UniqId', label: 'UNIQID', width: '100' }
|
|
|
-]
|
|
|
-const tableData = reactive([])
|
|
|
-const currentRow = ref()
|
|
|
-const type = ref('')
|
|
|
-
|
|
|
-const page = ref(1)
|
|
|
-const total = ref(0)
|
|
|
-const limit = ref(10)
|
|
|
-const searchInfo = ref('')
|
|
|
-const params = {
|
|
|
- date: '',
|
|
|
- Sczl_bh1: '',
|
|
|
- order: '',
|
|
|
- page: page.value.toString(),
|
|
|
- limit: limit.value.toString(),
|
|
|
-}
|
|
|
-
|
|
|
-const table = ref()
|
|
|
-const setCurrent = (row) => {
|
|
|
- table.value?.setCurrentRow(row)
|
|
|
-}
|
|
|
-
|
|
|
-// 获取表格数据
|
|
|
-const getTableData = async() => {
|
|
|
- // try {
|
|
|
- const response = await getTable(params)
|
|
|
- if (response.code === 0) {
|
|
|
- total.value = response.data.total
|
|
|
- tableData.splice(0, tableData.length, ...response.data.rows)
|
|
|
- setCurrent(tableData[0])
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 分页设置
|
|
|
-const handleSizeChange = () => {
|
|
|
- params.limit = limit.value.toString()
|
|
|
- getTableData()
|
|
|
-}
|
|
|
-
|
|
|
-// 页面跳转
|
|
|
-const handleCurrentChange = () => {
|
|
|
- params.page = page.value.toString()
|
|
|
- getTableData()
|
|
|
-}
|
|
|
-
|
|
|
-// 点击左侧节点
|
|
|
-const handleNodeClick = (node, check) => {
|
|
|
- if (node.params) {
|
|
|
- params.date = node.params.date
|
|
|
- params.Sczl_bh1 = node.params.Sczl_bh1
|
|
|
- params.order = ''
|
|
|
- page.value = 1
|
|
|
- handleCurrentChange()
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 搜索
|
|
|
-function handleSearch() {
|
|
|
- params.order = searchInfo.value
|
|
|
- params.date = ''
|
|
|
- params.Sczl_bh1 = ''
|
|
|
- page.value = 1
|
|
|
- handleCurrentChange()
|
|
|
-}
|
|
|
-
|
|
|
-// ============== 详情页面 ==============
|
|
|
-const detailData = reactive({})
|
|
|
-const leftData = ref(0)
|
|
|
-const rightData = ref(0)
|
|
|
-const dedhTreeData = ref()
|
|
|
-const gylcTreeData = ref()
|
|
|
-const selectData = reactive([])
|
|
|
-
|
|
|
-
|
|
|
-// 弹窗控制标记
|
|
|
-const dialogFormVisible = ref(false)
|
|
|
-const dialogDedh = ref(false)
|
|
|
-const dialogGylc = ref(false)
|
|
|
-// 新增数据
|
|
|
-const handleShowAdd = () => {
|
|
|
- type.value = '新增'
|
|
|
- if (!currentRow.value) {
|
|
|
- detailData.Sczl_bh1 = '';
|
|
|
- detailData.Sczl_cl = '';
|
|
|
- detailData.sys_bh = '';
|
|
|
- detailData.Sczl_desc = '';
|
|
|
- detailData.sczl_gdbh = '';
|
|
|
- detailData.Sczl_gxmc = '';
|
|
|
- detailData.sczl_Type = '';
|
|
|
- detailData.sczl_gxh = '';
|
|
|
- }else{
|
|
|
- Object.assign(detailData, currentRow.value)
|
|
|
- }
|
|
|
-
|
|
|
- // dialogFormVisible.value = true
|
|
|
- const date = dayjs().format('YYYY-MM-DD')
|
|
|
- detailData.Sczl_rq = date
|
|
|
- showDialog()
|
|
|
-}
|
|
|
-// 查改
|
|
|
-const handleShowDetail = () => {
|
|
|
- type.value = '查改'
|
|
|
- Object.assign(detailData, currentRow.value)
|
|
|
- // dialogFormVisible.value = true
|
|
|
- showDialog()
|
|
|
-}
|
|
|
-const handleYgbhEnter = async() => {
|
|
|
- const res = await getYg({ sczl_bh: detailData.Sczl_bh1 })
|
|
|
- if (res.code === 0) {
|
|
|
- detailData.name = res.data[0].ygxm
|
|
|
- detailData.Sczl_bh1 = res.data[0].员工编号
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const handleGdbhEnter = async() => {
|
|
|
- const res = await getGdmc({ gdbh: detailData.sczl_gdbh })
|
|
|
- if (res.code === 0) {
|
|
|
- detailData.Gd_cpmc = res.data.Gd_cpmc
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const handleGylcEnter = async() => {
|
|
|
- const res = await getGxMc({ gdbh: detailData.sczl_gdbh, keyword: '' })
|
|
|
- if (res.code === 0) {
|
|
|
- const data =res.data
|
|
|
- selectData.splice(0, selectData.length, ...data)
|
|
|
- setGXCurrent[selectData[0]]
|
|
|
- dialogGylc.value = true
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 工单选择框
|
|
|
-const handleSelectClick = (row, column, event) => {
|
|
|
- const { jyGx, Gy0_gxh } = row
|
|
|
- detailData.Sczl_gxmc=row.jyGx
|
|
|
- detailData.sczl_gxh = row.Gy0_gxh
|
|
|
- dialogGylc.value = false
|
|
|
-}
|
|
|
-const table2 = ref()
|
|
|
-const setGXCurrent = (row) => {
|
|
|
- setTimeout(()=>{
|
|
|
- table2.value?.setCurrentRow(row)
|
|
|
- const { jyGx, Gy0_gxh } = row
|
|
|
- detailData.Sczl_gxmc=row.jyGx
|
|
|
- detailData.sczl_gxh = row.Gy0_gxh
|
|
|
- })
|
|
|
-}
|
|
|
-const handleSelectGylc = (node, check) => {
|
|
|
- console.log(node.key)
|
|
|
- console.log(check)
|
|
|
- detailData.Sczl_gxmc = node['jyGx']
|
|
|
- detailData.sczl_gxh = node['Gy0_gxh']
|
|
|
- dialogGylc.value = false
|
|
|
-}
|
|
|
-const currentIndex = ref(0);
|
|
|
-const GXCurrent = ref(0);
|
|
|
-const selectGX = (event) => {
|
|
|
- if (event.keyCode === 40) { // 向下箭头
|
|
|
- if (currentIndex.value < selectData.length - 1) {
|
|
|
- currentIndex.value++;
|
|
|
- setGXCurrent(selectData[currentIndex.value]);
|
|
|
- } else {
|
|
|
- currentIndex.value = 0;
|
|
|
- setGXCurrent(selectData[currentIndex.value]); // 到达最后一行时回到第一行
|
|
|
- }
|
|
|
- } else if (event.keyCode === 38) { // 向上箭头
|
|
|
- if (currentIndex.value > 0) {
|
|
|
- currentIndex.value--;
|
|
|
- setGXCurrent(selectData[currentIndex.value]);
|
|
|
- } else {
|
|
|
- currentIndex.value = selectData.length - 1;
|
|
|
- setGXCurrent(selectData[currentIndex.value]); // 到达第一行时回到最后一行
|
|
|
- }
|
|
|
- } else if (event.keyCode === 13) { // 回车键
|
|
|
- dialogGylc.value = false
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const handleGjdhEnter = async() => {
|
|
|
- const res = await getDedh({ sczl_jtbh: '' })
|
|
|
- if (res.code === 0) {
|
|
|
- const { data } = res
|
|
|
-
|
|
|
- const transformData = (data) => {
|
|
|
- if (Array.isArray(data)) {
|
|
|
- return data.map((item) => transformData(item))
|
|
|
- } else if (typeof data === 'object') {
|
|
|
- const { Key_, sys_bh, sys_mc, bh_mc } = data
|
|
|
- const label = `${sys_bh}【${sys_mc}】`
|
|
|
- const node = { Key_, sys_bh, sys_mc, label }
|
|
|
-
|
|
|
- if (bh_mc) {
|
|
|
- node.children = transformData(bh_mc)
|
|
|
- }
|
|
|
-
|
|
|
- return node
|
|
|
- } else {
|
|
|
- return data
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const temp = []
|
|
|
- temp[0] = transformData(data)
|
|
|
- dedhTreeData.value = temp
|
|
|
- console.log(temp)
|
|
|
- dialogDedh.value = true
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const handleSelectDjdh = (node, check) => {
|
|
|
- if (!node['children']) {
|
|
|
- console.log(node)
|
|
|
- const { sys_bh, sys_mc } = node
|
|
|
- detailData.sys_bh = sys_bh
|
|
|
- detailData.sys_mc = sys_mc
|
|
|
- dialogDedh.value = false
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 弹窗确定
|
|
|
-const enterDialog = async() => {
|
|
|
- if (type.value === '查改') {
|
|
|
- updateDetailData()
|
|
|
- } else if (type.value === '新增') {
|
|
|
- addDetailData()
|
|
|
- }
|
|
|
-}
|
|
|
-// 新增
|
|
|
-const addDetailData = async() => {
|
|
|
- const restoredData = {
|
|
|
- Sys_id: sys_id,
|
|
|
- Sczl_bh1: detailData.Sczl_bh1,
|
|
|
- sczl_Type: detailData.sczl_Type,
|
|
|
- // name: detailData.name,
|
|
|
- Sczl_rq: detailData.Sczl_rq,
|
|
|
- Sczl_gdbh: detailData.sczl_gdbh,
|
|
|
- Sczl_gxmc: detailData.Sczl_gxmc,
|
|
|
- sczl_gxh: detailData.sczl_gxh,
|
|
|
- Sczl_cl: detailData.Sczl_cl,
|
|
|
- Sczl_dedh: detailData.sys_bh,
|
|
|
- Sczl_desc: detailData.Sczl_desc,
|
|
|
- }
|
|
|
- const res = await add(restoredData)
|
|
|
- if (res.code === 0) {
|
|
|
- ElMessage({
|
|
|
- type: 'success',
|
|
|
- message: '新增成功',
|
|
|
- })
|
|
|
- dialogFormVisible.value = false
|
|
|
- if(params.date!=''){
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-container>
|
|
|
+ <!-- 左侧树侧形结构-->
|
|
|
+ <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 @node-click="handleNodeClick" />
|
|
|
+ </div>
|
|
|
+ </layout-sider>
|
|
|
+
|
|
|
+ <el-container>
|
|
|
+ <el-main>
|
|
|
+ <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="plus" class="bt" @click="handleShowAdd">新增 </el-button>
|
|
|
+ <el-button type="primary" icon="delete" class="bt" @click="onDel">删除 </el-button>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 弹出框 -->
|
|
|
+ <div>
|
|
|
+ <!-- 详情页 -->
|
|
|
+ <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="type === 'create' ? '新增' : '修改'" destroy-on-close
|
|
|
+ width="800px">
|
|
|
+ <!-- <el-scrollbar height="500px"> -->
|
|
|
+ <el-form :model="detailData" id="detail-form" ref="elFormRef"
|
|
|
+ label-width="100px"
|
|
|
+ label-position="right" inline>
|
|
|
+ <el-row :gutter="24" >
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="员工编号">
|
|
|
+ <el-input v-model="detailData.Sczl_bh1" @blur="handleYgbhEnter"
|
|
|
+ @keydown="ent1($event)" style="width: 120px" />
|
|
|
+ <el-input style="width: 120px; margin-left: 5px" readonly v-model="detailData.name" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="24" >
|
|
|
+ <el-col :span="14">
|
|
|
+ <el-form-item label="工序类别">
|
|
|
+ <el-input @blur="get_LB" v-model="detailData.sczl_Type"
|
|
|
+ @keydown="ent1($event)" style="width: 120px; " />
|
|
|
+
|
|
|
+ <!-- <el-select v-model="detailData.sczl_Type" style="width: 150px">
|
|
|
+ <el-option label="拆片" value="拆片" />
|
|
|
+ <el-option label="包装" value="包装" />
|
|
|
+ <el-option label="打包" value="打包" />
|
|
|
+ <el-option label="拉料" value="拉料" />
|
|
|
+ </el-select> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item label="日期">
|
|
|
+ <el-input type="date" max="9999-12-31" v-model="detailData.Sczl_rq"
|
|
|
+ @keydown="ent1($event)" style="width: 150px" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="24" >
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="工单编号">
|
|
|
+ <el-input v-model="detailData.Sczl_gdbh" @blur="handleGdbhEnter"
|
|
|
+ @keydown="ent1($event)" style="width: 120px"/>
|
|
|
+ <el-input v-model="detailData.Gd_cpmc" style="width: 480px; margin-left: 5px"
|
|
|
+ readonly />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="24" >
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="工艺流程">
|
|
|
+ <el-input v-model="detailData.Sczl_gxmc" @blur="handleGylcEnter"
|
|
|
+ @keydown="ent1($event)" style="width: 480px"/>
|
|
|
+ <el-input v-model="detailData.sczl_gxh" style="width: 120px; margin-left: 5px"
|
|
|
+ readonly />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="24" >
|
|
|
+ <el-col :span="14">
|
|
|
+ <el-form-item label="" style="margin-left: 67px;">
|
|
|
+ <el-input v-model="leftData" @keydown="ent1($event)" style="width: 100px; margin-left: 32px;"
|
|
|
+ @blur="()=>{detailData.Sczl_cl = (leftData * rightData).toString()}"/>X
|
|
|
+ <el-input v-model="rightData" @keydown="ent1($event)" style="width: 100px;margin-left: 12px;"
|
|
|
+ @blur="()=>{detailData.Sczl_cl = (leftData * rightData).toString()}"
|
|
|
+ />
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item label="计件产量" >
|
|
|
+ <el-input @keydown="ent1($event)" v-model="detailData.Sczl_cl" style="width: 150px" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="24" >
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="工价代号">
|
|
|
+ <el-input v-model="detailData.Sczl_dedh" style="width: 150px"
|
|
|
+ @blur="handleGjdhEnter" @keydown="ent1($event)" />
|
|
|
+ <el-input v-model="detailData.sys_mc" style="width: 450px; margin-left: 5px" readonly />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="24" >
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="票号备注">
|
|
|
+ <el-input v-model="detailData.Sczl_desc" @keydown="ent1($event)" style="width: 605px" />
|
|
|
+ </el-form-item>
|
|
|
+ </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>
|
|
|
+
|
|
|
+ <!-- 工价代号弹窗 -->
|
|
|
+ <el-dialog v-model="dialogDedh" :before-close="()=>{dialogDedh = false}" title="工价代号"
|
|
|
+ destroy-on-close>
|
|
|
+
|
|
|
+ <el-scrollbar style="height: 50vh;width: 50vw;">
|
|
|
+ <el-tree :data="dedhTreeData" highlight-current style="width: 90%;"
|
|
|
+ @node-click="handleSelectDjdh" />
|
|
|
+ </el-scrollbar>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 工艺流程弹窗 -->
|
|
|
+ <el-dialog v-model="dialogGylc" title="工艺流程"
|
|
|
+ destroy-on-close style="width: 500px; " @keydown="selectGX($event)">
|
|
|
+
|
|
|
+ <el-table tooltip-effect="dark" :data="selectData" row-key="ID" highlight-current-row="true"
|
|
|
+ border style="width:100%" height="400px" @row-dblclick="handleSelectClick" ref="table2">
|
|
|
+ <el-table-column prop="jyGx" label="检验工序" width="460" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 工序类别选择 -->
|
|
|
+ <el-dialog v-model="LBVisible" title="选择"
|
|
|
+ destroy-on-close width="200px" @keydown="selectLB($event)" >
|
|
|
+ <el-table tooltip-effect="dark" :data="LBselectData" row-key="ID"
|
|
|
+ highlight-current-row="true" border style="width:100%"
|
|
|
+ :row-style="{ height: '30px' }"
|
|
|
+ @row-dblclick="LBSelectClick"
|
|
|
+ ref="tableLB"
|
|
|
+ >
|
|
|
+ <el-table-column prop="sczl_Type" label="" width="160" />
|
|
|
+ </el-table>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </layout-header>
|
|
|
+
|
|
|
+ <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="handleShowEdit" @current-change="(row, oldRow) => { currentRow = row}">
|
|
|
+
|
|
|
+ <!-- 循环渲染列 -->
|
|
|
+ <el-table-column v-for=" column in tableColumns " :key="column.prop" :prop="column.prop"
|
|
|
+ :label="column.label" :width="column.width" sortable />
|
|
|
+
|
|
|
+ </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>
|
|
|
+
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ Layout,
|
|
|
+ LayoutContent,
|
|
|
+ LayoutHeader,
|
|
|
+ LayoutSider
|
|
|
+ } from '@arco-design/web-vue'
|
|
|
+ import {
|
|
|
+ ElMessage,
|
|
|
+ dayjs,
|
|
|
+ ElMessageBox
|
|
|
+ } from 'element-plus'
|
|
|
+ import {
|
|
|
+ ref,
|
|
|
+ reactive,
|
|
|
+ nextTick
|
|
|
+ } from 'vue'
|
|
|
+ import {
|
|
|
+ getSide,
|
|
|
+ getTable,
|
|
|
+ getYg,
|
|
|
+ getGdmc,
|
|
|
+ getDedh,
|
|
|
+ getGxMc,
|
|
|
+ updateData,
|
|
|
+ add,
|
|
|
+ del
|
|
|
+ } from '@/api/mes_api_gty/otherDocuments'
|
|
|
+ import {
|
|
|
+ useUserStore
|
|
|
+ } from '@/pinia/modules/user'
|
|
|
+ const userStore = useUserStore()
|
|
|
+ const sys_id = '[' + userStore.userInfo.userName + '/' + userStore.userInfo.nickName + ']'
|
|
|
+ defineOptions({
|
|
|
+ name: '07OtherDocuments'
|
|
|
+ })
|
|
|
+
|
|
|
+ // 侧边栏数据请求
|
|
|
+ const treeData = reactive([])
|
|
|
+ const getSideData = async () => {
|
|
|
+ const response = await getSide()
|
|
|
+ if (response.code === 0) {
|
|
|
+ const transformedData = response.data.map(item => ({
|
|
|
+ label: `${item.date.replace(/-/g, '.')}【产量合计: ${item.counts}】`,
|
|
|
+ children: item.sys.map(sysItem => ({
|
|
|
+ label: `${sysItem.Sczl_bh1}(${sysItem.name}) 【产量合计: ${sysItem.count}】`,
|
|
|
+ params: {
|
|
|
+ date: item.date.substring(0, 4) + '-' + item.date.substring(4),
|
|
|
+ Sczl_bh1: sysItem.Sczl_bh1,
|
|
|
+ },
|
|
|
+ })),
|
|
|
+ }))
|
|
|
+ treeData.splice(0, treeData.length, ...transformedData)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ getSideData()
|
|
|
+
|
|
|
+ const elFormRef = ref()
|
|
|
+
|
|
|
+ // ============== 表格页面 ==============
|
|
|
+ const tableColumns = [{
|
|
|
+ prop: 'sczl_Type',
|
|
|
+ label: '计件类型',
|
|
|
+ width: '120'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'Sczl_rq',
|
|
|
+ label: '日期',
|
|
|
+ width: '100'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'Sczl_bh1',
|
|
|
+ label: '员工编号',
|
|
|
+ width: '120'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'name',
|
|
|
+ label: '员工姓名',
|
|
|
+ width: '120'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sczl_gdbh',
|
|
|
+ label: '工单编号',
|
|
|
+ width: '120'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'Gd_cpmc',
|
|
|
+ label: '产品名称',
|
|
|
+ width: '300'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'Sczl_cl',
|
|
|
+ label: '产量',
|
|
|
+ width: '100'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: '',
|
|
|
+ label: '千件工价',
|
|
|
+ width: '120'
|
|
|
+ }, // prop 属性值需要补充
|
|
|
+ {
|
|
|
+ prop: 'sys_mc',
|
|
|
+ label: '工价备注',
|
|
|
+ width: '200'
|
|
|
+ }, // prop 属性值需要补充
|
|
|
+ {
|
|
|
+ prop: 'Sczl_desc',
|
|
|
+ label: '备注',
|
|
|
+ width: '100'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'Sczl_gxmc',
|
|
|
+ label: '工序名称',
|
|
|
+ width: '120'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sczl_yjno',
|
|
|
+ label: '印件号',
|
|
|
+ width: '100'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sczl_gxh',
|
|
|
+ label: '工序号',
|
|
|
+ width: '100'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sys_id',
|
|
|
+ label: '创建用户',
|
|
|
+ width: '150'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sys_rq',
|
|
|
+ label: '创建时间',
|
|
|
+ width: '200'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'mod_rq',
|
|
|
+ label: '修改时间',
|
|
|
+ width: '200'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'UniqId',
|
|
|
+ label: 'UNIQID',
|
|
|
+ width: '100'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ const tableData = reactive([])
|
|
|
+ const currentRow = ref()
|
|
|
+ const type = ref('')
|
|
|
+
|
|
|
+ const page = ref(1)
|
|
|
+ const total = ref(0)
|
|
|
+ const limit = ref(10)
|
|
|
+ const searchInfo = ref('')
|
|
|
+ const params = {
|
|
|
+ date: '',
|
|
|
+ Sczl_bh1: '',
|
|
|
+ order: '',
|
|
|
+ page: page.value.toString(),
|
|
|
+ limit: limit.value.toString(),
|
|
|
+ }
|
|
|
+
|
|
|
+ const table = ref()
|
|
|
+ const setCurrent = (row) => {
|
|
|
+ table.value?.setCurrentRow(row)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取表格数据
|
|
|
+ const getTableData = async () => {
|
|
|
+ // try {
|
|
|
+ const response = await getTable(params)
|
|
|
+ if (response.code === 0) {
|
|
|
+ total.value = response.data.total
|
|
|
+ tableData.splice(0, tableData.length, ...response.data.rows)
|
|
|
+ setCurrent(tableData[0])
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分页设置
|
|
|
+ const handleSizeChange = () => {
|
|
|
+ params.limit = limit.value.toString()
|
|
|
+ getTableData()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 页面跳转
|
|
|
+ const handleCurrentChange = () => {
|
|
|
+ params.page = page.value.toString()
|
|
|
getTableData()
|
|
|
}
|
|
|
- getSideData()
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-// 修改
|
|
|
-const updateDetailData = async() => {
|
|
|
- const params = {
|
|
|
- UniqId: detailData.UniqId,
|
|
|
- Sczl_bh1: detailData.Sczl_bh1,
|
|
|
- sczl_Type: detailData.sczl_Type,
|
|
|
- Sczl_rq: detailData.Sczl_rq,
|
|
|
- Sczl_gdbh: detailData.sczl_gdbh,
|
|
|
- Sczl_gxmc: detailData.Sczl_gxmc,
|
|
|
- sczl_gxh: detailData.sczl_gxh,
|
|
|
- Sczl_cl: detailData.Sczl_cl,
|
|
|
- Sczl_dedh: detailData.sys_bh,
|
|
|
- Sczl_desc: detailData.Sczl_desc,
|
|
|
- }
|
|
|
- const res = await updateData(params)
|
|
|
- if (res.code === 0) {
|
|
|
- ElMessage({
|
|
|
- type: 'success',
|
|
|
- message: '更新成功',
|
|
|
- })
|
|
|
- dialogFormVisible.value = false
|
|
|
- params.order = ''
|
|
|
- // page.value = 1
|
|
|
- handleCurrentChange()
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 开启弹窗
|
|
|
-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 = (event) => {
|
|
|
- const index = Array.from(formElements).indexOf(event.target)
|
|
|
- const key = event.key
|
|
|
- event.preventDefault()
|
|
|
- console.log(formElements)
|
|
|
- switch (index) {
|
|
|
- case 0:
|
|
|
- if (key === 'ArrowDown') {
|
|
|
- formElements[1].focus()
|
|
|
- formElements[1].select();
|
|
|
- } else if (key === 'ArrowUp') {
|
|
|
- formElements[formElements.length - 1].focus()
|
|
|
- } else if (key === 'Enter') {
|
|
|
- formElements[1].focus()
|
|
|
- formElements[1].select();
|
|
|
- }
|
|
|
- break
|
|
|
-
|
|
|
- case formElements.length - 1 :
|
|
|
- if (key === 'ArrowDown') {
|
|
|
- formElements[0].focus()
|
|
|
- formElements[0].select();
|
|
|
- } else if (key === 'ArrowUp') {
|
|
|
- formElements[index - 1].focus()
|
|
|
- } else if (key === 'Enter') {
|
|
|
- formElements[0].focus()
|
|
|
- formElements[0].select();
|
|
|
- }
|
|
|
- break
|
|
|
-
|
|
|
- default:
|
|
|
- if (key === 'ArrowDown') {
|
|
|
- formElements[index + 1].focus()
|
|
|
- formElements[index + 1].select();
|
|
|
- } else if (key === 'ArrowUp') {
|
|
|
- formElements[index - 1].focus()
|
|
|
- formElements[index + 1].select();
|
|
|
- } else if (key === 'Enter') {
|
|
|
- formElements[index + 1].focus()
|
|
|
- formElements[index + 1].select();
|
|
|
- }
|
|
|
- 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>
|
|
|
+
|
|
|
+ // 点击左侧节点
|
|
|
+ const handleNodeClick = (node, check) => {
|
|
|
+ if (node.params) {
|
|
|
+ params.date = node.params.date
|
|
|
+ params.Sczl_bh1 = node.params.Sczl_bh1
|
|
|
+ params.order = ''
|
|
|
+ page.value = 1
|
|
|
+ handleCurrentChange()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ function handleSearch() {
|
|
|
+ params.order = searchInfo.value
|
|
|
+ params.date = ''
|
|
|
+ params.Sczl_bh1 = ''
|
|
|
+ page.value = 1
|
|
|
+ handleCurrentChange()
|
|
|
+ }
|
|
|
+
|
|
|
+ // ============== 详情页面 ==============
|
|
|
+ const detailData = reactive({
|
|
|
+ Sczl_bh1: '',
|
|
|
+ sczl_Type: '',
|
|
|
+ Sczl_rq: '',
|
|
|
+ Sczl_gdbh: '',
|
|
|
+ Sczl_gxmc: '',
|
|
|
+ sczl_gxh: '',
|
|
|
+ Sczl_cl: '',
|
|
|
+ Sczl_dedh: '',
|
|
|
+ Sczl_desc: '',
|
|
|
+ })
|
|
|
+ const leftData = ref(0)
|
|
|
+ const rightData = ref(0)
|
|
|
+ const dedhTreeData = ref()
|
|
|
+ const gylcTreeData = ref()
|
|
|
+ const selectData = reactive([])
|
|
|
+
|
|
|
+
|
|
|
+ // 弹窗控制标记
|
|
|
+ const dialogFormVisible = ref(false)
|
|
|
+ const dialogDedh = ref(false)
|
|
|
+ const dialogGylc = ref(false)
|
|
|
+ // 新增数据
|
|
|
+ const handleShowAdd = () => {
|
|
|
+ type.value = 'create'
|
|
|
+ // 设置detailData对象中的所有属性值为空
|
|
|
+ Object.keys(detailData).forEach(key => {
|
|
|
+ detailData[key] = '';
|
|
|
+ });
|
|
|
+ const date = dayjs().format('YYYY-MM-DD')
|
|
|
+ detailData.Sczl_rq = date
|
|
|
+ dialogFormVisible.value = true
|
|
|
+ }
|
|
|
+ // 查改
|
|
|
+ const handleShowEdit = () => {
|
|
|
+ type.value = 'update'
|
|
|
+ Object.assign(detailData, currentRow.value)
|
|
|
+ detailData.Sczl_gdbh = detailData.sczl_gdbh
|
|
|
+ detailData.Sczl_dedh = detailData.sys_bh
|
|
|
+ dialogFormVisible.value = true
|
|
|
+ }
|
|
|
+ const ent1 = (event) => {
|
|
|
+ const inputs = document.getElementsByTagName('input');
|
|
|
+ const currentIndex = Array.from(inputs).indexOf(event.target);
|
|
|
+
|
|
|
+ if (event.keyCode === 13 || event.keyCode === 40) { // Enter 或向下箭头
|
|
|
+ for (let i = currentIndex + 1; i < inputs.length; i++) {
|
|
|
+ if (!inputs[i].readOnly) {
|
|
|
+ nextTick(()=>{
|
|
|
+ inputs[i].focus();
|
|
|
+ inputs[i].select();
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (event.keyCode === 38) { // 向上箭头
|
|
|
+ for (let i = currentIndex - 1; i >= 0; i--) {
|
|
|
+ if (!inputs[i].readOnly) {
|
|
|
+ nextTick(()=>{
|
|
|
+ inputs[i].focus();
|
|
|
+ inputs[i].select();
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (event.keyCode === 8) { // 删除箭头
|
|
|
+ if (event.target.selectionStart === 0) {
|
|
|
+ for (let i = currentIndex - 1; i >= 0; i--) {
|
|
|
+ if (!inputs[i].readOnly) {
|
|
|
+ nextTick(()=>{
|
|
|
+ inputs[i].focus();
|
|
|
+ inputs[i].setSelectionRange(0, 0);
|
|
|
+ inputs[i].select(); // 全选输入框内容
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (event.keyCode === 37) { // 向左箭头
|
|
|
+ if (event.target.selectionStart === 0) {
|
|
|
+ for (let i = currentIndex - 1; i >= 0; i--) {
|
|
|
+ if (!inputs[i].readOnly) {
|
|
|
+ nextTick(()=>{
|
|
|
+ inputs[i].focus();
|
|
|
+ inputs[i].select();
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (event.keyCode === 39) { // 向右箭头
|
|
|
+ if (event.target.selectionStart === event.target.value.length) {
|
|
|
+ for (let i = currentIndex + 1; i < inputs.length; i++) {
|
|
|
+ if (!inputs[i].readOnly) {
|
|
|
+ nextTick(()=>{
|
|
|
+ inputs[i].focus();
|
|
|
+ inputs[i].select();
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //员工编号回车事件
|
|
|
+ const handleYgbhEnter = async () => {
|
|
|
+ if(!detailData.Sczl_bh1){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const res = await getYg({
|
|
|
+ sczl_bh: detailData.Sczl_bh1
|
|
|
+ })
|
|
|
+ if (res.code === 0) {
|
|
|
+ detailData.name = res.data[0].ygxm
|
|
|
+ detailData.Sczl_bh1 = res.data[0].员工编号
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //工序类型选择
|
|
|
+ const get_LB = () => {
|
|
|
+ GetLB()
|
|
|
+ }
|
|
|
+ const LBVisible = ref(false)
|
|
|
+ const LBselectData = reactive([])
|
|
|
+ //获取仓库信息
|
|
|
+ const GetLB = async () => {
|
|
|
+ const data = [{'sczl_Type':'拆片'},{'sczl_Type':'包装'},{'sczl_Type':'打包'},{'sczl_Type':'拉料'}]
|
|
|
+ LBselectData.splice(0, LBselectData.length, ...data)
|
|
|
+ setLBCurrent(LBselectData[0])
|
|
|
+ LBVisible.value=true
|
|
|
+ }
|
|
|
+ //选择
|
|
|
+ const LBSelectClick = (row, column, event) => {
|
|
|
+ const { sczl_Type } = row
|
|
|
+ detailData.sczl_Type=sczl_Type
|
|
|
+ LBVisible.value = false
|
|
|
+ }
|
|
|
+ const tableLB=ref()
|
|
|
+ const setLBCurrent = (row) => {
|
|
|
+ setTimeout(()=>{
|
|
|
+ tableLB.value?.setCurrentRow(row)
|
|
|
+ const { sczl_Type } = row
|
|
|
+ detailData.sczl_Type = sczl_Type
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const LBIndex = ref(0);
|
|
|
+ const LBCurrent = ref(0);
|
|
|
+ const selectLB = (event) => {
|
|
|
+ if (event.keyCode === 40) { // 向下箭头
|
|
|
+ if (LBIndex.value < LBselectData.length - 1) {
|
|
|
+ LBIndex.value++;
|
|
|
+ setLBCurrent(LBselectData[LBIndex.value]);
|
|
|
+ } else {
|
|
|
+ LBIndex.value = 0;
|
|
|
+ setLBCurrent(LBselectData[LBIndex.value]); // 到达最后一行时回到第一行
|
|
|
+ }
|
|
|
+ } else if (event.keyCode === 38) { // 向上箭头
|
|
|
+ if (LBIndex.value > 0) {
|
|
|
+ LBIndex.value--;
|
|
|
+ setLBCurrent(LBselectData[LBIndex.value]);
|
|
|
+ } else {
|
|
|
+ LBIndex.value = LBselectData.length - 1;
|
|
|
+ setLBCurrent(LBselectData[LBIndex.value]); // 到达第一行时回到最后一行
|
|
|
+ }
|
|
|
+ } else if (event.keyCode === 13) { // 回车键
|
|
|
+ LBVisible.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleGdbhEnter = async () => {
|
|
|
+ const res = await getGdmc({
|
|
|
+ gdbh: detailData.Sczl_gdbh
|
|
|
+ })
|
|
|
+ if (res.code === 0) {
|
|
|
+ detailData.Gd_cpmc = res.data.Gd_cpmc
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleGylcEnter = async () => {
|
|
|
+ const res = await getGxMc({
|
|
|
+ gdbh: detailData.Sczl_gdbh,
|
|
|
+ keyword: ''
|
|
|
+ })
|
|
|
+ if (res.code === 0) {
|
|
|
+ const data = res.data.sort((a, b) => parseInt(a.Gy0_yjno) - parseInt(b.Gy0_yjno));
|
|
|
+ selectData.splice(0, selectData.length, ...data)
|
|
|
+ setGXCurrent[selectData[0]]
|
|
|
+ dialogGylc.value = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 工单选择框
|
|
|
+ const handleSelectClick = (row, column, event) => {
|
|
|
+ detailData.Sczl_gxmc = row.jyGx
|
|
|
+ detailData.sczl_gxh = row.Gy0_gxh
|
|
|
+ detailData.Gd_cpmc = row.Gd_cpmc
|
|
|
+ dialogGylc.value = false
|
|
|
+ }
|
|
|
+ const table2 = ref()
|
|
|
+ const setGXCurrent = (row) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ table2.value?.setCurrentRow(row)
|
|
|
+ detailData.Sczl_gxmc = row.jyGx
|
|
|
+ detailData.sczl_gxh = row.Gy0_gxh
|
|
|
+ detailData.Gd_cpmc = row.Gd_cpmc
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const handleSelectGylc = (node, check) => {
|
|
|
+ detailData.Sczl_gxmc = node['jyGx']
|
|
|
+ detailData.sczl_gxh = node['Gy0_gxh']
|
|
|
+ detailData.Gd_cpmc = node['Gd_cpmc']
|
|
|
+ dialogGylc.value = false
|
|
|
+ }
|
|
|
+ const currentIndex = ref(0);
|
|
|
+ const GXCurrent = ref(0);
|
|
|
+ const selectGX = (event) => {
|
|
|
+ if (event.keyCode === 40) { // 向下箭头
|
|
|
+ if (currentIndex.value < selectData.length - 1) {
|
|
|
+ currentIndex.value++;
|
|
|
+ setGXCurrent(selectData[currentIndex.value]);
|
|
|
+ } else {
|
|
|
+ currentIndex.value = 0;
|
|
|
+ setGXCurrent(selectData[currentIndex.value]); // 到达最后一行时回到第一行
|
|
|
+ }
|
|
|
+ } else if (event.keyCode === 38) { // 向上箭头
|
|
|
+ if (currentIndex.value > 0) {
|
|
|
+ currentIndex.value--;
|
|
|
+ setGXCurrent(selectData[currentIndex.value]);
|
|
|
+ } else {
|
|
|
+ currentIndex.value = selectData.length - 1;
|
|
|
+ setGXCurrent(selectData[currentIndex.value]); // 到达第一行时回到最后一行
|
|
|
+ }
|
|
|
+ } else if (event.keyCode === 13) { // 回车键
|
|
|
+ dialogGylc.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleGjdhEnter = async () => {
|
|
|
+ const res = await getDedh({ sczl_jtbh: '' })
|
|
|
+ if (res.code === 0) {
|
|
|
+ const { data } = res
|
|
|
+
|
|
|
+ const transformData = (data) => {
|
|
|
+ if (Array.isArray(data)) {
|
|
|
+ return data.map((item) => transformData(item))
|
|
|
+ } else if (typeof data === 'object') {
|
|
|
+ const { Key_, sys_bh, sys_mc, bh_mc } = data
|
|
|
+ const label = `${sys_bh}【${sys_mc}】`
|
|
|
+ const node = {
|
|
|
+ Key_,
|
|
|
+ sys_bh,
|
|
|
+ sys_mc,
|
|
|
+ label
|
|
|
+ }
|
|
|
+
|
|
|
+ if (bh_mc) { node.children = transformData(bh_mc) }
|
|
|
+
|
|
|
+ return node
|
|
|
+ } else {
|
|
|
+ return data
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const temp = []
|
|
|
+ temp[0] = transformData(data)
|
|
|
+ dedhTreeData.value = temp
|
|
|
+ dialogDedh.value = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleSelectDjdh = (node, check) => {
|
|
|
+ if (!node['children']) {
|
|
|
+ const { sys_bh, sys_mc } = node
|
|
|
+ detailData.Sczl_dedh = sys_bh
|
|
|
+ detailData.sys_mc = sys_mc
|
|
|
+ dialogDedh.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 弹窗确定
|
|
|
+ const enterDialog = async () => {
|
|
|
+ // if(formData.value.入仓类型==''){
|
|
|
+ // ElMessage({type: 'warning',message: '请选择入仓类型'});
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // if(formData.value.仓库编号==''){
|
|
|
+ // ElMessage({type: 'warning',message: '请选择仓库'});
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // if(formData.value.jjcp_gdbh==''){
|
|
|
+ // ElMessage({type: 'warning',message: '请填写工单编号'});
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // if(formData.value.jjcp_cpdh==''){
|
|
|
+ // ElMessage({type: 'warning',message: '请选择印件'});
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // if(formData.value.jjcp_sl==''){
|
|
|
+ // ElMessage({type: 'warning',message: '请填写入仓数量'});
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+
|
|
|
+ const restoredData = {
|
|
|
+ Sys_id: sys_id,
|
|
|
+ Sczl_bh1: detailData.Sczl_bh1,
|
|
|
+ sczl_Type: detailData.sczl_Type,
|
|
|
+ Sczl_rq: detailData.Sczl_rq,
|
|
|
+ Sczl_gdbh: detailData.Sczl_gdbh,
|
|
|
+ Sczl_gxmc: detailData.Sczl_gxmc,
|
|
|
+ sczl_gxh: detailData.sczl_gxh,
|
|
|
+ Sczl_cl: detailData.Sczl_cl,
|
|
|
+ Sczl_dedh: detailData.Sczl_dedh,
|
|
|
+ Sczl_desc: detailData.Sczl_desc,
|
|
|
+ }
|
|
|
+ let res
|
|
|
+ switch (type.value) {
|
|
|
+ case 'create':
|
|
|
+ res = await add(restoredData)
|
|
|
+ break
|
|
|
+ case 'update':
|
|
|
+ restoredData.UniqId = detailData.UniqId;
|
|
|
+ res = await updateData(restoredData)
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ // res = await createCompany(formData.value)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: type.value=='create'? '创建成功' :'更改成功'
|
|
|
+ })
|
|
|
+
|
|
|
+ dialogFormVisible.value = false
|
|
|
+ getTableData()
|
|
|
+ // getSideData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 关闭弹窗
|
|
|
+ const closeDialog = () => {
|
|
|
+ dialogFormVisible.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ let formElements
|
|
|
+ const moveFocus = (event) => {
|
|
|
+ const index = Array.from(formElements).indexOf(event.target)
|
|
|
+ const key = event.key
|
|
|
+ event.preventDefault()
|
|
|
+ console.log(formElements)
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ if (key === 'ArrowDown') {
|
|
|
+ formElements[1].focus()
|
|
|
+ formElements[1].select();
|
|
|
+ } else if (key === 'ArrowUp') {
|
|
|
+ formElements[formElements.length - 1].focus()
|
|
|
+ } else if (key === 'Enter') {
|
|
|
+ formElements[1].focus()
|
|
|
+ formElements[1].select();
|
|
|
+ }
|
|
|
+ break
|
|
|
+
|
|
|
+ case formElements.length - 1:
|
|
|
+ if (key === 'ArrowDown') {
|
|
|
+ formElements[0].focus()
|
|
|
+ formElements[0].select();
|
|
|
+ } else if (key === 'ArrowUp') {
|
|
|
+ formElements[index - 1].focus()
|
|
|
+ } else if (key === 'Enter') {
|
|
|
+ formElements[0].focus()
|
|
|
+ formElements[0].select();
|
|
|
+ }
|
|
|
+ break
|
|
|
+
|
|
|
+ default:
|
|
|
+ if (key === 'ArrowDown') {
|
|
|
+ formElements[index + 1].focus()
|
|
|
+ formElements[index + 1].select();
|
|
|
+ } else if (key === 'ArrowUp') {
|
|
|
+ formElements[index - 1].focus()
|
|
|
+ formElements[index + 1].select();
|
|
|
+ } else if (key === 'Enter') {
|
|
|
+ formElements[index + 1].focus()
|
|
|
+ formElements[index + 1].select();
|
|
|
+ }
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const rowSelection = {
|
|
|
+ type: 'radio'
|
|
|
+ };
|
|
|
+
|
|
|
+ // let lastCellValue=ref()
|
|
|
+ // 多选
|
|
|
+ // const handleSelectionChange = (val) => {
|
|
|
+ // if(val.length>0){
|
|
|
+ // lastCellValue = val.map(row=>row.UniqId)
|
|
|
+ // }
|
|
|
+ // console.log(lastCellValue)
|
|
|
+ // console.log(rowSelection)
|
|
|
+ // }
|
|
|
+
|
|
|
+ //删除
|
|
|
+ function onDel() {
|
|
|
+ if(!currentRow.value){
|
|
|
+ ElMessage({
|
|
|
+ type: 'warning',
|
|
|
+ message: '请选择要删除的数据',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ ElMessageBox.confirm('确定要删除吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ del({UniqId:currentRow.value.UniqId}).then(res=>{
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ getTableData()
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ // Del()
|
|
|
+ }
|
|
|
+ //删除
|
|
|
+ const Del = async () => {
|
|
|
+ console.log(lastCellValue)
|
|
|
+ return
|
|
|
+ const response = await finisheddel({UniqId:lastCellValue});
|
|
|
+ if (response.code === 0) {
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ getTableData()
|
|
|
+ }
|
|
|
+</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>
|
