优化

src/view/yunyin/product/ProductPar.vue

@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <layout>
+      <layout-header>
+        <div class="product-header">
+          <el-input
+            v-model="searchKeyword"
+            placeholder="搜索部件代号或名称"
+            clearable
+            style="width: 220px; margin: 5px"
+            @keyup.enter="onSearch"
+            @clear="onSearch"
+          />
+          <el-button type="primary" icon="Search" style="margin: 5px" @click="onSearch">查询</el-button>
+          <el-button type="primary" icon="Plus" style="margin: 5px" @click="onAdd">新增</el-button>
+        </div>
+      </layout-header>
+
+      <layout-content>
+        <el-main class="product-main">
+          <div class="gva-table-box">
+            <el-table
+              :data="tableData"
+              border
+              size="small"
+              style="width: 100%; height: 60vh"
+              :row-style="{ height: '20px' }"
+              :header-cell-style="{ padding: '0px' }"
+              :cell-style="{ padding: '0px' }"
+              :header-row-style="{ height: '20px' }"
+              row-key="id"
+              :show-overflow-tooltip="true"
+            >
+              <el-table-column align="center" label="部件编码" prop="部件编码" width="90" />
+              <el-table-column align="left" label="部件名称" prop="部件名称" width="100" show-overflow-tooltip />
+              <el-table-column align="center" label="操作人" prop="sys_id" width="100" />
+              <el-table-column align="center" label="创建时间" prop="创建时间" width="115" />
+              <el-table-column align="center" label="修改时间" prop="修改时间" width="120" />
+              <el-table-column align="center" label="操作" width="140">
+                <template #default="{ row }">
+                  <el-button type="primary" size="small" @click="onEdit(row)">编辑</el-button>
+                  <el-button type="danger" size="small" @click="onDelete(row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="gva-pagination">
+              <el-pagination
+                v-model:current-page="page"
+                v-model:page-size="pageSize"
+                :page-sizes="[10, 20, 30, 50]"
+                :total="total"
+                layout="total, sizes, prev, pager, next, jumper"
+                background
+                small
+                @current-change="fetchData"
+                @size-change="onPageSizeChange"
+              />
+            </div>
+          </div>
+        </el-main>
+      </layout-content>
+    </layout>
+
+    <!-- 新增弹窗 -->
+    <el-dialog
+      v-model="dialogVisible"
+      title="新增部件"
+      width="400px"
+    >
+      <el-form :model="formData" label-width="80px">
+        <el-form-item label="部件信息">
+          <el-input
+            v-model="formData.par"
+            placeholder="请输入部件信息"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleAdd">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { Layout, LayoutContent } from '@arco-design/web-vue'
+import { ref, onMounted } from 'vue'
+import { ParList, ParDelete, ParAdd } from '@/api/yunyin/product'
+ import { useUserStore } from '@/pinia/modules/user';
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+defineOptions({ name: 'ProductPar' })
+//获取登录用户信息
+const userStore = useUserStore()
+const _username = ref('')
+_username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName
+console.log('获取用户名称',_username.value)
+
+const tableData = ref([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(30)
+const searchKeyword = ref('')
+
+// 弹窗相关
+const dialogVisible = ref(false)
+const formData = ref({
+  par: ''
+})
+
+const fetchData = async () => {
+  try {
+    const params = {
+      page: page.value,
+      limit: pageSize.value,
+    }
+    const kw = searchKeyword.value.trim()
+    if (kw) {
+      params.search = kw
+    }
+
+    const res = await ParList(params)
+    if (res?.code !== 0) {
+      ElMessage.error(res?.msg || '获取部件资料失败')
+      tableData.value = []
+      total.value = 0
+      return
+    }
+    const payload = res.data || {}
+    tableData.value = Array.isArray(payload.list) ? payload.list : []
+    const c = payload.count ?? payload.total
+    total.value = c != null ? Number(c) : tableData.value.length
+  } catch (e) {
+    console.error(e)
+    tableData.value = []
+    total.value = 0
+    ElMessage.error('获取部件资料失败')
+  }
+}
+
+const onSearch = () => {
+  page.value = 1
+  fetchData()
+}
+
+const onPageSizeChange = () => {
+  page.value = 1
+  fetchData()
+}
+
+const onAdd = () => {
+  formData.value = {
+    par: ''
+  }
+  dialogVisible.value = true
+}
+
+const handleAdd = async () => {
+  try {
+    const par = formData.value.par.trim()
+    if (!par) {
+      ElMessage.error('请输入部件信息')
+      return
+    }
+
+    const params = {
+      par: par,
+      sys_id: userStore.userInfo.nickName
+    }
+
+    const res = await ParAdd(params)
+    if (res?.code !== 0) {
+      ElMessage.error(res?.msg || '新增失败')
+      return
+    }
+
+    ElMessage.success('新增成功')
+    dialogVisible.value = false
+    fetchData()
+  } catch (e) {
+    console.error(e)
+    ElMessage.error('新增失败')
+  }
+}
+
+const onEdit = (row) => {
+  ElMessage.info('编辑功能待开发')
+}
+
+const onDelete = async (row) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该部件资料吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+
+    const res = await ParDelete({ id: row.id })
+    if (res?.code !== 0) {
+      ElMessage.error(res?.msg || '删除失败')
+      return
+    }
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (e) {
+    if (e !== 'cancel') {
+      console.error(e)
+      ElMessage.error('删除失败')
+    }
+  }
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.product-header {
+  padding: 4px 0;
+}
+.product-main {
+  padding-bottom: 8px;
+}
+.gva-pagination {
+  margin-top: 5px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/view/yunyin/product/ProductProcess.vue

@@ -0,0 +1,271 @@
+<template>
+  <div>
+    <layout>
+      <layout-header>
+        <div class="product-header">
+          <el-input
+            v-model="searchKeyword"
+            placeholder="搜索工艺编码或名称"
+            clearable
+            style="width: 220px; margin: 5px"
+            @keyup.enter="onSearch"
+            @clear="onSearch"
+          />
+          <el-button type="primary" icon="Search" style="margin: 5px" @click="onSearch">查询</el-button>
+          <el-button type="primary" icon="Plus" style="margin: 5px" @click="onAdd">新增</el-button>
+        </div>
+      </layout-header>
+
+      <layout>
+        <layout-sider :resize-directions="['right']" :width="200" style="margin-right: 10px">
+          <div class="product-menu-wrap">
+            <h3 class="product-menu-title">工序</h3>
+            <el-tree
+              ref="menuTreeRef"
+              :data="menuTreeData"
+              class="treecolor product-menu-tree"
+              :props="treeProps"
+              node-key="id"
+              default-expand-all
+              highlight-current
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ data }">
+                <span class="tree-node-text">{{ data.label }}</span>
+              </template>
+            </el-tree>
+          </div>
+        </layout-sider>
+
+        <layout-content>
+          <el-main class="product-main">
+            <div class="gva-table-box">
+              <el-table
+                :data="tableData"
+                border
+                size="small"
+                style="width: 100%; height: 60vh"
+                :row-style="{ height: '20px' }"
+                :header-cell-style="{ padding: '0px' }"
+                :cell-style="{ padding: '0px' }"
+                :header-row-style="{ height: '20px' }"
+                row-key="id"
+                :show-overflow-tooltip="true"
+              >
+                <el-table-column align="center" label="工艺编码" prop="工艺编码" width="100" />
+                <el-table-column align="left" label="工艺名称" prop="工艺名称" width="160" show-overflow-tooltip />
+                <el-table-column align="center" label="生产工序" prop="生产工序" width="90" />
+                <el-table-column align="center" label="标准工时" prop="标准工时" width="80" />
+                <el-table-column align="center" label="标准工分" prop="标准工分" width="80" />
+                <el-table-column align="center" label="操作人" prop="sys_id" width="90" />
+                <el-table-column align="center" label="创建时间" prop="创建时间" width="115" />
+                <el-table-column align="center" label="修改时间" prop="修改时间" width="115" />
+                <el-table-column align="center" label="操作" width="130">
+                  <template #default="{ row }">
+                    <el-button type="primary" size="small" @click="onEdit(row)">编辑</el-button>
+                    <el-button type="danger" size="small" @click="onDelete(row)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <div class="gva-pagination">
+                <el-pagination
+                  v-model:current-page="page"
+                  v-model:page-size="pageSize"
+                  :page-sizes="[10, 20, 30, 50]"
+                  :total="total"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  background
+                  small
+                  @current-change="fetchData"
+                  @size-change="onPageSizeChange"
+                />
+              </div>
+            </div>
+          </el-main>
+        </layout-content>
+      </layout>
+    </layout>
+  </div>
+</template>
+
+<script setup>
+import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue'
+import { ref, onMounted, nextTick } from 'vue'
+import { ProcessList, ProcessDelete } from '@/api/yunyin/product'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+defineOptions({ name: 'ProductProcess' })
+
+const menuTreeRef = ref(null)
+const treeProps = { label: 'label', children: 'children' }
+const menuTreeData = ref([
+  {
+    id: 'process-all',
+    label: '全部工序',
+    isAll: true
+  },
+  {
+    id: 'process-裁剪',
+    label: '裁剪',
+    code: '裁剪'
+  },
+  {
+    id: 'process-车缝',
+    label: '车缝',
+    code: '车缝'
+  },
+  {
+    id: 'process-手工',
+    label: '手工',
+    code: '手工'
+  },
+  {
+    id: 'process-大烫',
+    label: '大烫',
+    code: '大烫'
+  },
+  {
+    id: 'process-总检',
+    label: '总检',
+    code: '总检'
+  },
+  {
+    id: 'process-包装',
+    label: '包装',
+    code: '包装'
+  }
+])
+
+const tableData = ref([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(30)
+const searchKeyword = ref('')
+const selectedCode = ref(null)
+
+const fetchData = async () => {
+  try {
+    const params = {
+      page: page.value,
+      limit: pageSize.value,
+    }
+    const kw = searchKeyword.value.trim()
+    if (kw) {
+      params.search = kw
+    }
+    if (selectedCode.value) {
+      params.code = selectedCode.value
+    }
+
+    const res = await ProcessList(params)
+    if (res?.code !== 0) {
+      ElMessage.error(res?.msg || '获取工艺资料失败')
+      tableData.value = []
+      total.value = 0
+      return
+    }
+    const payload = res.data || {}
+    tableData.value = Array.isArray(payload.list) ? payload.list : []
+    const c = payload.count ?? payload.total
+    total.value = c != null ? Number(c) : tableData.value.length
+  } catch (e) {
+    console.error(e)
+    tableData.value = []
+    total.value = 0
+    ElMessage.error('获取工艺资料失败')
+  }
+}
+
+const handleNodeClick = (data) => {
+  if (data.isAll) {
+    selectedCode.value = null
+  } else {
+    selectedCode.value = data.code
+  }
+  page.value = 1
+  fetchData()
+}
+
+const onSearch = () => {
+  page.value = 1
+  fetchData()
+}
+
+const onPageSizeChange = () => {
+  page.value = 1
+  fetchData()
+}
+
+const onAdd = () => {
+  ElMessage.info('新增功能待开发')
+}
+
+const onEdit = (row) => {
+  ElMessage.info('编辑功能待开发')
+}
+
+const onDelete = async (row) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该工艺资料吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+
+    const res = await ProcessDelete({ id: row.id })
+    if (res?.code !== 0) {
+      ElMessage.error(res?.msg || '删除失败')
+      return
+    }
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (e) {
+    if (e !== 'cancel') {
+      console.error(e)
+      ElMessage.error('删除失败')
+    }
+  }
+}
+
+onMounted(async () => {
+  await nextTick()
+  menuTreeRef.value?.setCurrentKey('process-all')
+  fetchData()
+})
+</script>
+
+<style scoped>
+.product-header {
+  padding: 4px 0;
+}
+.product-menu-wrap {
+  background: #fff;
+  padding: 10px;
+  min-height: 260px;
+  max-height: calc(100vh - 140px);
+  overflow: auto;
+}
+.product-menu-title {
+  font-size: 15px;
+  font-weight: 700;
+  margin: 0 0 10px;
+}
+.tree-node-text {
+  font-size: 13px;
+}
+.product-menu-wrap :deep(.product-menu-tree.el-tree .el-tree-node.is-current > .el-tree-node__content) {
+  color: red;
+}
+.product-menu-wrap :deep(.product-menu-tree.el-tree .el-tree-node.is-current > .el-tree-node__content .tree-node-text) {
+  color: red;
+  font-weight: 600;
+}
+.product-main {
+  padding-bottom: 8px;
+}
+.gva-pagination {
+  margin-top: 5px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/view/yunyin/product/list.vue

@@ -44,8 +44,11 @@
                   :data="tableData"
                   border
                   size="small"
-                  style="width: 100%"
-                  :height="340"
+                  style="width: 100%; height: 28vh"
+                  :row-style="{ height: '20px' }"
+                  :header-cell-style="{ padding: '0px' }"
+                  :cell-style="{ padding: '0px' }"
+                  :header-row-style="{ height: '20px' }"
                   row-key="id"
                   :show-overflow-tooltip="true"
                   highlight-current-row
@@ -73,15 +76,19 @@
                 </div>
               </div>
 
-              <div class="product-detail-block">
-                <div v-if="!selectedRow" class="detail-empty">请在上方列表中点击一行产品，查看部件资料与工艺资料</div>
-                <el-tabs v-else v-model="detailTab" type="border-card" class="product-detail-tabs">
-                  <el-tab-pane label="部件资料" name="part">
+              <!-- 部件资料和工艺资料 -->
+              <el-tabs v-model="detailTab" @tab-click="handleTabClick">
+                <el-tab-pane label="部件资料" name="part">
+                  <div class="gva-table-box">
                     <el-table
                       :data="partList"
                       border
                       size="small"
-                      max-height="260"
+                      style="width: 100%; height: 36vh"
+                      :row-style="{ height: '20px' }"
+                      :header-cell-style="{ padding: '0px' }"
+                      :cell-style="{ padding: '0px' }"
+                      :header-row-style="{ height: '20px' }"
                       row-key="id"
                       :show-overflow-tooltip="true"
                     >
@@ -93,26 +100,32 @@
                       <el-table-column align="center" label="创建时间" prop="Sys_rq" width="160" />
                       <el-table-column align="center" label="修改时间" prop="mod_rq" width="160" />
                     </el-table>
-                    <div class="gva-pagination detail-pagination">
+                    <div class="gva-pagination">
                       <el-pagination
                         v-model:current-page="partPage"
                         v-model:page-size="partPageSize"
                         :page-sizes="[10, 20, 30, 50]"
                         :total="partTotal"
-                        small
+                        layout="total, sizes, prev, pager, next, jumper"
                         background
-                        layout="total, sizes, prev, pager, next"
+                        small
                         @current-change="fetchPartList"
                         @size-change="onPartPageSizeChange"
                       />
                     </div>
-                  </el-tab-pane>
-                  <el-tab-pane label="工艺资料" name="gy">
+                  </div>
+                </el-tab-pane>
+                <el-tab-pane label="工艺资料" name="gy">
+                  <div class="gva-table-box">
                     <el-table
                       :data="gyList"
                       border
                       size="small"
-                      max-height="260"
+                      style="width: 100%; height: 36vh"
+                      :row-style="{ height: '20px' }"
+                      :header-cell-style="{ padding: '0px' }"
+                      :cell-style="{ padding: '0px' }"
+                      :header-row-style="{ height: '20px' }"
                       row-key="id"
                       :show-overflow-tooltip="true"
                     >
@@ -125,22 +138,22 @@
                       <el-table-column align="center" label="创建时间" prop="createtime" width="160" />
                       <el-table-column align="center" label="更新时间" prop="updatetime" width="160" />
                     </el-table>
-                    <div class="gva-pagination detail-pagination">
+                    <div class="gva-pagination">
                       <el-pagination
                         v-model:current-page="gyPage"
                         v-model:page-size="gyPageSize"
                         :page-sizes="[10, 20, 30, 50]"
                         :total="gyTotal"
-                        small
+                        layout="total, sizes, prev, pager, next, jumper"
                         background
-                        layout="total, sizes, prev, pager, next"
+                        small
                         @current-change="fetchGyList"
                         @size-change="onGyPageSizeChange"
                       />
                     </div>
-                  </el-tab-pane>
-                </el-tabs>
-              </div>
+                  </div>
+                </el-tab-pane>
+              </el-tabs>
             </div>
           </el-main>
         </layout-content>
@@ -366,6 +379,14 @@ const onGyPageSizeChange = () => {
   fetchGyList()
 }
 
+const handleTabClick = (tab) => {
+  if (tab.props.name === 'part' && selectedRow.value) {
+    fetchPartList()
+  } else if (tab.props.name === 'gy' && selectedRow.value) {
+    fetchGyList()
+  }
+}
+
 onMounted(async () => {
   await loadMenu()
   menuFilter.value = null
@@ -406,7 +427,7 @@ onMounted(async () => {
   margin-bottom: 10px;
 }
 .gva-pagination {
-  margin-top: 12px;
+  margin-top: 5px;
 }
 .product-main {
   padding-bottom: 8px;
@@ -420,28 +441,18 @@ onMounted(async () => {
 .product-list-block {
   flex-shrink: 0;
 }
-.product-detail-block {
-  flex: 1;
-  min-height: 200px;
-}
-.detail-empty {
-  padding: 24px;
-  text-align: center;
-  color: #909399;
-  font-size: 14px;
-  background: #fafafa;
-  border: 1px dashed #dcdfe6;
-  border-radius: 4px;
-}
-.product-detail-tabs {
-  width: 100%;
-}
-.product-detail-tabs :deep(.el-tabs__content) {
-  padding-top: 8px;
+
+.gva-table-box {
+  margin-top: 0;
 }
-.detail-pagination {
-  margin-top: 10px;
+
+.gva-pagination {
+  margin-top: 5px;
   display: flex;
   justify-content: flex-end;
 }
+
+:deep(.el-tabs__content) {
+  padding-top: 0 !important;
+}
 </style>