feat(production-master-data): 新增产线、工艺流程类别、产品管理模块

1. 新增工厂区域全量查询API
2. 新增产线管理API、页面、路由与多语言配置
3. 新增工艺流程类别管理API、页面、路由与多语言配置
4. 新增产品管理API、页面、路由与多语言配置
5. 修复MenuTree组件slot-scope语法兼容问题
6. 追加对应功能的测试文档与版本记录

src/api/production-master-data/factory-area.js

@@ -10,6 +10,14 @@ function apiParams (method, data = {}) {
   }
 }
 
+export function getFactoryAreaALL (data) {
+  return request({
+    url: BASE + 'all',
+    method: 'get',
+    params: apiParams('all', data)
+  })
+}
+
 export function getFactoryAreaList (data) {
   return request({
     url: BASE + 'list',

src/api/production-master-data/process-category.js

@@ -0,0 +1,43 @@
+import { request } from '@/api/_service'
+
+const BASE = 'production_configuration/technology_model/technology_flow_category/'
+
+function apiParams (method, data = {}) {
+  return {
+    method: `production_master_data_process_model_process_category_${method}`,
+    platform: 'background',
+    ...data
+  }
+}
+
+export function getProcessCategoryList (data) {
+  return request({
+    url: BASE + 'list',
+    method: 'get',
+    params: apiParams('list', data)
+  })
+}
+
+export function createProcessCategory (data) {
+  return request({
+    url: BASE + 'create',
+    method: 'post',
+    data: apiParams('create', data)
+  })
+}
+
+export function editProcessCategory (data) {
+  return request({
+    url: BASE + 'edit',
+    method: 'put',
+    data: apiParams('edit', data)
+  })
+}
+
+export function deleteProcessCategory (data) {
+  return request({
+    url: BASE + 'delete',
+    method: 'delete',
+    data: apiParams('delete', data)
+  })
+}

src/api/production-master-data/product-management.js

@@ -0,0 +1,43 @@
+import { request } from '@/api/_service'
+
+const BASE = 'production_configuration/product_model/battery_model/'
+
+function apiParams(method, data = {}) {
+  return {
+    method: `production_master_data_product_management_product_list_${method}`,
+    platform: 'background',
+    ...data
+  }
+}
+
+export function getProductList(data) {
+  return request({
+    url: BASE + 'list',
+    method: 'get',
+    params: apiParams('list', data)
+  })
+}
+
+export function createProduct(data) {
+  return request({
+    url: BASE + 'create',
+    method: 'post',
+    data: apiParams('create', data)
+  })
+}
+
+export function editProduct(data) {
+  return request({
+    url: BASE + 'edit',
+    method: 'put',
+    data: apiParams('edit', data)
+  })
+}
+
+export function deleteProduct(data) {
+  return request({
+    url: BASE + 'delete',
+    method: 'delete',
+    data: apiParams('delete', data)
+  })
+}

src/api/production-master-data/production-line.js

@@ -0,0 +1,43 @@
+import { request } from '@/api/_service'
+
+const BASE = 'production_configuration/factory_model/factory_line/'
+
+function apiParams (method, data = {}) {
+  return {
+    method: `production_master_data_factory_model_factory_line_${method}`,
+    platform: 'background',
+    ...data
+  }
+}
+
+export function getProductionLineList (data) {
+  return request({
+    url: BASE + 'list',
+    method: 'get',
+    params: apiParams('list', data)
+  })
+}
+
+export function createProductionLine (data) {
+  return request({
+    url: BASE + 'create',
+    method: 'post',
+    data: apiParams('create', data)
+  })
+}
+
+export function editProductionLine (data) {
+  return request({
+    url: BASE + 'edit',
+    method: 'put',
+    data: apiParams('edit', data)
+  })
+}
+
+export function deleteProductionLine (data) {
+  return request({
+    url: BASE + 'delete',
+    method: 'delete',
+    data: apiParams('delete', data)
+  })
+}

src/locales/en.json

@@ -45,6 +45,90 @@
 					"confirm_delete": "Are you sure to delete?",
 					"validation_fail": "Validation failed",
 					"please_enter": "Please enter {name}"
+				},
+				"production_line": {
+					"search": "Search",
+					"reset": "Reset",
+					"enter_code": "Please enter production line code",
+					"enter_name": "Please enter production line name",
+					"enter_remark": "Please enter remark",
+					"operation_success": "Operation succeeded",
+					"sort": "No.",
+					"code": "Production Line Code",
+					"name": "Production Line Name",
+					"area": "Plant Area",
+					"area_name": "Plant Area",
+					"select_area": "Please select plant area",
+					"remark": "Remark",
+					"operation": "Actions",
+					"add": "Add",
+					"edit": "Edit",
+					"delete": "Delete",
+					"remark_length": "Length should be 1 to 100 characters",
+					"add_title": "Add Production Line",
+					"edit_title": "Edit Production Line",
+					"cancel": "Cancel",
+					"confirm": "Confirm",
+					"tip": "Tip",
+					"confirm_delete": "Are you sure to delete?",
+					"validation_fail": "Validation failed"
+				}
+			},
+			"process_model": {
+				"process_category": {
+					"search": "Search",
+					"reset": "Reset",
+					"enter_code": "Please enter category code",
+					"enter_name": "Please enter category name",
+					"operation_success": "Operation succeeded",
+					"sort": "No.",
+					"code": "Category Code",
+					"name": "Category Name",
+					"remark": "Remark",
+					"operation": "Actions",
+					"add": "Add",
+					"edit": "Edit",
+					"delete": "Delete",
+					"remark_required": "Please enter remark",
+					"remark_length": "Length should be 1 to 100 characters",
+					"add_title": "Add Process Category",
+					"edit_title": "Edit Process Category",
+					"cancel": "Cancel",
+					"confirm": "Confirm",
+					"tip": "Tip",
+					"confirm_delete": "Are you sure to delete?",
+					"validation_fail": "Validation failed",
+					"please_enter": "Please enter {name}"
+				}
+			},
+			"product_management": {
+				"product_list": {
+					"search": "Search",
+					"reset": "Reset",
+					"enter_code": "Please enter product code",
+					"enter_name": "Please enter product name",
+					"operation_success": "Operation succeeded",
+					"create_success": "Created successfully",
+					"edit_success": "Updated successfully",
+					"delete_success": "Deleted successfully",
+					"sort": "No.",
+					"code": "Product Code",
+					"name": "Product Name",
+					"remark": "Remark",
+					"operation": "Actions",
+					"add": "Add",
+					"edit": "Edit",
+					"delete": "Delete",
+					"enter_remark": "Please enter remark",
+					"remark_length": "Length should be 1 to 100 characters",
+					"add_title": "Add Product",
+					"edit_title": "Edit Product",
+					"cancel": "Cancel",
+					"confirm": "Confirm",
+					"tip": "Tip",
+					"confirm_delete": "Are you sure to delete?",
+					"validation_fail": "Validation failed",
+					"please_enter": "Please enter {name}"
 				}
 			}
 		},

src/locales/zh-chs.json

@@ -45,6 +45,90 @@
 					"confirm_delete": "确定要执行该操作吗?",
 					"validation_fail": "校验失败",
 					"please_enter": "请输入{name}"
+				},
+				"production_line": {
+					"search": "查询",
+					"reset": "重置",
+					"enter_code": "请输入产线编码",
+					"enter_name": "请输入产线名称",
+					"enter_remark": "请输入备注",
+					"operation_success": "操作成功",
+					"sort": "序号",
+					"code": "产线编码",
+					"name": "产线名称",
+					"area": "所区",
+					"area_name": "所属所区",
+					"select_area": "请选择所区",
+					"remark": "备注",
+					"operation": "操作",
+					"add": "新 增",
+					"edit": "编 辑",
+					"delete": "删 除",
+					"remark_length": "长度在 1 到 100 个字符",
+					"add_title": "新增产线",
+					"edit_title": "编辑产线",
+					"cancel": "取消",
+					"confirm": "确定",
+					"tip": "提示",
+					"confirm_delete": "确定要执行该操作吗?",
+					"validation_fail": "校验失败"
+				}
+			},
+			"process_model": {
+				"process_category": {
+					"search": "查询",
+					"reset": "重置",
+					"enter_code": "请输入流程类别编码",
+					"enter_name": "请输入流程类别名称",
+					"operation_success": "操作成功",
+					"sort": "序号",
+					"code": "流程类别编码",
+					"name": "流程类别名称",
+					"remark": "备注",
+					"operation": "操作",
+					"add": "新 增",
+					"edit": "编 辑",
+					"delete": "删 除",
+					"remark_required": "请输入备注",
+					"remark_length": "长度在 1 到 100 个字符",
+					"add_title": "新增工艺流程类别",
+					"edit_title": "编辑工艺流程类别",
+					"cancel": "取消",
+					"confirm": "确定",
+					"tip": "提示",
+					"confirm_delete": "确定要执行该操作吗?",
+					"validation_fail": "校验失败",
+					"please_enter": "请输入{name}"
+				}
+			},
+			"product_management": {
+				"product_list": {
+					"search": "查询",
+					"reset": "重置",
+					"enter_code": "请输入产品代号",
+					"enter_name": "请输入产品名称",
+					"operation_success": "操作成功",
+					"create_success": "新增成功",
+					"edit_success": "编辑成功",
+					"delete_success": "删除成功",
+					"sort": "序号",
+					"code": "产品代号",
+					"name": "产品名称",
+					"remark": "备注",
+					"operation": "操作",
+					"add": "新 增",
+					"edit": "编 辑",
+					"delete": "删 除",
+					"enter_remark": "请输入备注",
+					"remark_length": "长度在 1 到 100 个字符",
+					"add_title": "新增产品",
+					"edit_title": "编辑产品",
+					"cancel": "取消",
+					"confirm": "确定",
+					"tip": "提示",
+					"confirm_delete": "确定要执行该操作吗?",
+					"validation_fail": "校验失败",
+					"please_enter": "请输入{name}"
 				}
 			}
 		},

src/router/modules/production-master-data.js

@@ -19,6 +19,24 @@ export default {
       name: `${pre}factory_model-factory_area`,
       meta: { ...meta, cache: true, title: '工厂区域' },
       component: _import('production-master-data/factory-model/factory-area')
+    },
+    {
+      path: 'factory_model/factory_line',
+      name: `${pre}factory_model-factory_line`,
+      meta: { ...meta, cache: true, title: '产线设置' },
+      component: _import('production-master-data/factory-model/production-line')
+    },
+    {
+      path: 'technology_model/technology_flow_category',
+      name: `${pre}technology_model-technology_flow_category`,
+      meta: { ...meta, cache: true, title: '工艺流程类别' },
+      component: _import('production-master-data/process-model/process-category')
+    },
+    {
+      path: 'product_model/battery_model',
+      name: `${pre}product_management-product_list`,
+      meta: { ...meta, cache: true, title: '产品列表' },
+      component: _import('production-master-data/product-management/product-list')
     }
   ])('production_configuration-')
 }

src/views/production-master-data/factory-model/production-line/index.vue

@@ -0,0 +1,346 @@
+<template>
+  <d2-container>
+    <template #header>
+      <div class="search-bar">
+        <el-form :inline="true" size="mini">
+          <el-form-item :label="$t(key('code'))">
+            <el-input
+              v-model="search.code"
+              :placeholder="$t(key('enter_code'))"
+              clearable
+              style="width:200px"
+              @keyup.enter.native="onSearch"
+            />
+          </el-form-item>
+          <el-form-item :label="$t(key('name'))">
+            <el-input
+              v-model="search.name"
+              :placeholder="$t(key('enter_name'))"
+              clearable
+              style="width:200px"
+              @keyup.enter.native="onSearch"
+            />
+          </el-form-item>
+          <el-form-item :label="$t(key('area'))">
+            <el-select
+              v-model="search.area_id"
+              :placeholder="$t(key('select_area'))"
+              clearable
+              filterable
+              style="width:200px"
+            >
+              <el-option
+                v-for="item in areaOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="onSearch">
+              {{ $t(key('search')) }}
+            </el-button>
+            <el-button icon="el-icon-refresh" @click="onReset">
+              {{ $t(key('reset')) }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </template>
+
+    <page-table
+      ref="pageTable"
+      :columns="columns"
+      :data="tableData"
+      :loading="loading"
+      :toolbar-buttons="toolbarButtons"
+      :row-buttons="rowButtons"
+      :pagination="pagination"
+      help-url="/help/production-line"
+      :help-text="$t(ckey('help'))"
+      auto-height
+      @page-change="onPageChange"
+      @selection-change="onSelect"
+    />
+
+    <page-dialog-form
+      ref="dialogForm"
+      :visible.sync="dialogVisible"
+      :title="dialogTitle"
+      :width="'35%'"
+      :form-cols="dialogFormCols"
+      :form-data="formData"
+      :rules="rules"
+      :label-width="'100px'"
+      :submitting="submitting"
+      :confirm-text="key('confirm')"
+      :cancel-text="key('cancel')"
+      @submit="onDialogSubmit"
+      @close="onDialogClose"
+    />
+  </d2-container>
+</template>
+
+<script>
+import { useTableColumns } from '@/composables/useTableColumns'
+import { useTableButtons } from '@/composables/useTableButtons'
+import { i18nMixin } from '@/composables/useI18n'
+import { confirmMixin } from '@/composables/useConfirmHandle'
+import {
+  getProductionLineList,
+  createProductionLine,
+  editProductionLine,
+  deleteProductionLine
+} from '@/api/production-master-data/production-line'
+import { getFactoryAreaALL } from '@/api/production-master-data/factory-area'
+import PageTable from '@/components/page-table'
+import PageDialogForm from '@/components/page-dialog-form'
+
+export default {
+  name: 'production-master-data-production-line',
+  components: { PageTable, PageDialogForm },
+  mixins: [i18nMixin('page.production_master_data.factory_model.production_line'), confirmMixin],
+  data () {
+    return {
+      loading: false,
+      submitting: false,
+      tableData: [],
+      selectedRows: [],
+      dialogVisible: false,
+      dialogTitle: '',
+      editId: '',
+      handleType: 'create',
+      search: { code: '', name: '', area_id: '' },
+      pagination: { current: 1, size: 10, total: 0 },
+      areaOptions: [],
+      formData: { code: '', name: '', area_id: '', remark: '' },
+      rules: {
+        code: [
+          { required: true, message: this.key('enter_code'), trigger: 'blur' },
+          { min: 1, max: 100, message: this.key('remark_length'), trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: this.key('enter_name'), trigger: 'blur' },
+          { min: 1, max: 100, message: this.key('remark_length'), trigger: 'blur' }
+        ],
+        area_id: [
+          { required: true, message: this.key('select_area'), trigger: 'change' }
+        ]
+      },
+      columns: [],
+      toolbarButtons: [],
+      rowButtons: [],
+      baseFormCols: [
+        [
+          {
+            type: 'input',
+            prop: 'code',
+            label: this.key('code'),
+            placeholder: this.key('enter_code'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ],
+        [
+          {
+            type: 'input',
+            prop: 'name',
+            label: this.key('name'),
+            placeholder: this.key('enter_name'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ],
+        [
+          {
+            type: 'select',
+            prop: 'area_id',
+            label: this.key('area'),
+            placeholder: this.key('select_area'),
+            clearable: true,
+            filterable: true,
+            style: { width: '90%' },
+            options: []
+          }
+        ],
+        [
+          {
+            type: 'input',
+            prop: 'remark',
+            inputType: 'textarea',
+            autosize: { minRows: 2, maxRows: 6 },
+            label: this.key('remark'),
+            placeholder: this.key('enter_remark'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ]
+      ]
+    }
+  },
+  computed: {
+    dialogFormCols () {
+      const idx = 2
+      const cols = JSON.parse(JSON.stringify(this.baseFormCols))
+      if (cols[idx] && cols[idx][0]) {
+        cols[idx][0].options = this.areaOptions
+      }
+      return cols
+    }
+  },
+  created () {
+    this.initAreaOptions()
+    this.columns = useTableColumns([
+      { prop: 'sort', label: this.key('sort'), width: 80 },
+      { prop: 'code', label: this.key('code'), minWidth: 120 },
+      { prop: 'name', label: this.key('name'), minWidth: 120 },
+      { prop: 'area_name', label: this.key('area_name'), minWidth: 120 },
+      { prop: 'remark', label: this.key('remark') },
+      { prop: '_actions', label: this.key('operation'), width: 160, fixed: 'right' }
+    ])
+    const btns = useTableButtons({
+      toolbar: [
+        {
+          key: 'add',
+          label: this.key('add'),
+          icon: 'el-icon-plus',
+          type: 'primary',
+          auth: '/production_configuration/factory_model/factory_line/create',
+          onClick: this.openAdd
+        }
+      ],
+      row: [
+        {
+          key: 'edit',
+          label: this.key('edit'),
+          icon: 'el-icon-edit',
+          auth: '/production_configuration/factory_model/factory_line/edit',
+          onClick: this.openEdit
+        },
+        {
+          key: 'delete',
+          label: this.key('delete'),
+          icon: 'el-icon-delete',
+          color: 'danger',
+          auth: '/production_configuration/factory_model/factory_line/delete',
+          onClick: this.handleDelete
+        }
+      ]
+    }, this.$permission)
+    this.toolbarButtons = btns.toolbarButtons
+    this.rowButtons = btns.rowButtons
+    this.fetchData()
+  },
+  methods: {
+    async initAreaOptions () {
+      try {
+        const res = await getFactoryAreaALL()
+        const data = Array.isArray(res) ? res : (res.data || [])
+        this.areaOptions = data.map(item => ({ value: item.area_id || item.id, label: item.name }))
+      } catch { /* 忽略加载失败 */ }
+    },
+    async fetchData () {
+      this.loading = true
+      try {
+        const res = await getProductionLineList({
+          ...this.search,
+          page_no: this.pagination.current,
+          page_size: this.pagination.size
+        })
+        const list = Array.isArray(res) ? res : (res.data || [])
+        const total = Array.isArray(res) ? res.length : (res.count || 0)
+        this.tableData = list
+        this.pagination.total = total
+      } finally {
+        this.loading = false
+      }
+    },
+    onSearch () {
+      this.pagination.current = 1
+      this.fetchData()
+    },
+    onReset () {
+      this.search = { code: '', name: '', area_id: '' }
+      this.pagination.current = 1
+      this.fetchData()
+    },
+    onPageChange (page) {
+      this.pagination.current = page.current
+      this.pagination.size = page.size
+      this.fetchData()
+    },
+    onSelect (rows) {
+      this.selectedRows = rows
+    },
+    resetForm () {
+      this.formData = { code: '', name: '', area_id: '', remark: '' }
+      this.editId = ''
+    },
+    openAdd () {
+      this.handleType = 'create'
+      this.dialogTitle = this.key('add_title')
+      this.$nextTick(() => {
+        this.$refs.dialogForm && this.$refs.dialogForm.reset()
+        this.resetForm()
+        this.dialogVisible = true
+      })
+    },
+    openEdit (row) {
+      this.handleType = 'edit'
+      this.dialogTitle = this.key('edit_title')
+      this.editId = row.id
+      this.formData = {
+        code: row.code,
+        name: row.name,
+        area_id: row.area_id,
+        remark: row.remark || ''
+      }
+      this.dialogVisible = true
+    },
+    async onDialogSubmit () {
+      this.submitting = true
+      try {
+        if (this.handleType === 'create') {
+          await createProductionLine(this.formData)
+        } else {
+          await editProductionLine({ ...this.formData, id: this.editId })
+        }
+        this.$message.success(this.$t(this.key('operation_success')))
+        this.dialogVisible = false
+        this.fetchData()
+      } finally {
+        this.submitting = false
+      }
+    },
+    onDialogClose () {
+      this.resetForm()
+    },
+    async handleDelete (row) {
+      const cancelled = await this.$confirmAction(
+        {
+          message: this.key('confirm_delete'),
+          title: this.key('tip')
+        },
+        () => deleteProductionLine({ id: [row.id] })
+      )
+      if (cancelled) return
+      this.$message.success(this.$t(this.key('operation_success')))
+      this.pagination.current = Math.min(
+        this.pagination.current,
+        Math.ceil((this.pagination.total - 1) / this.pagination.size) || 1
+      )
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search-bar {
+  padding: 10px 0;
+}
+/deep/ .el-form-item--mini.el-form-item {
+  margin-bottom: 4px;
+}
+</style>

src/views/production-master-data/process-model/process-category/index.vue

@@ -0,0 +1,293 @@
+<template>
+  <d2-container>
+    <template #header>
+      <div class="search-bar">
+        <el-form :inline="true" size="mini">
+          <el-form-item :label="$t(key('code'))">
+            <el-input
+              v-model="search.code"
+              :placeholder="$t(key('enter_code'))"
+              clearable
+              style="width:200px"
+              @keyup.enter.native="onSearch"
+            />
+          </el-form-item>
+          <el-form-item :label="$t(key('name'))">
+            <el-input
+              v-model="search.name"
+              :placeholder="$t(key('enter_name'))"
+              clearable
+              style="width:200px"
+              @keyup.enter.native="onSearch"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="onSearch">
+              {{ $t(key('search')) }}
+            </el-button>
+            <el-button icon="el-icon-refresh" @click="onReset">
+              {{ $t(key('reset')) }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </template>
+
+    <page-table
+      ref="pageTable"
+      :columns="columns"
+      :data="tableData"
+      :loading="loading"
+      :toolbar-buttons="toolbarButtons"
+      :row-buttons="rowButtons"
+      :pagination="pagination"
+      help-url="/help/process-category"
+      :help-text="$t(ckey('help'))"
+      auto-height
+      @page-change="onPageChange"
+      @selection-change="onSelect"
+    />
+
+    <page-dialog-form
+      ref="dialogForm"
+      :visible.sync="dialogVisible"
+      :title="dialogTitle"
+      :width="'35%'"
+      :form-cols="formCols"
+      :form-data="formData"
+      :rules="rules"
+      :label-width="'110px'"
+      :submitting="submitting"
+      :confirm-text="key('confirm')"
+      :cancel-text="key('cancel')"
+      @submit="onDialogSubmit"
+      @close="onDialogClose"
+    />
+  </d2-container>
+</template>
+
+<script>
+import { useTableColumns } from '@/composables/useTableColumns'
+import { useTableButtons } from '@/composables/useTableButtons'
+import { i18nMixin } from '@/composables/useI18n'
+import { confirmMixin } from '@/composables/useConfirmHandle'
+import {
+  getProcessCategoryList,
+  createProcessCategory,
+  editProcessCategory,
+  deleteProcessCategory
+} from '@/api/production-master-data/process-category'
+import PageTable from '@/components/page-table'
+import PageDialogForm from '@/components/page-dialog-form'
+
+export default {
+  name: 'production-master-data-process-category',
+  components: { PageTable, PageDialogForm },
+  mixins: [i18nMixin('page.production_master_data.process_model.process_category'), confirmMixin],
+  data () {
+    return {
+      loading: false,
+      submitting: false,
+      tableData: [],
+      selectedRows: [],
+      dialogVisible: false,
+      dialogTitle: '',
+      editId: '',
+      handleType: 'create',
+      search: { code: '', name: '' },
+      pagination: { current: 1, size: 10, total: 0 },
+      formData: { code: '', name: '', remark: '' },
+      rules: {
+        code: [
+          { required: true, message: this.key('enter_code'), trigger: 'blur' },
+          { min: 1, max: 100, message: this.key('remark_length'), trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: this.key('enter_name'), trigger: 'blur' },
+          { min: 1, max: 100, message: this.key('remark_length'), trigger: 'blur' }
+        ]
+      },
+      columns: [],
+      toolbarButtons: [],
+      rowButtons: [],
+      formCols: [
+        [
+          {
+            type: 'input',
+            prop: 'code',
+            label: this.key('code'),
+            placeholder: this.key('enter_code'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ],
+        [
+          {
+            type: 'input',
+            prop: 'name',
+            label: this.key('name'),
+            placeholder: this.key('enter_name'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ],
+        [
+          {
+            type: 'input',
+            prop: 'remark',
+            inputType: 'textarea',
+            autosize: { minRows: 2, maxRows: 6 },
+            label: this.key('remark'),
+            placeholder: this.key('remark_required'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ]
+      ]
+    }
+  },
+  created () {
+    this.columns = useTableColumns([
+      { prop: 'sort', label: this.key('sort'), width: 80 },
+      { prop: 'code', label: this.key('code'), minWidth: 120 },
+      { prop: 'name', label: this.key('name'), minWidth: 120 },
+      { prop: 'remark', label: this.key('remark') },
+      { prop: '_actions', label: this.key('operation'), width: 160, fixed: 'right' }
+    ])
+    const btns = useTableButtons({
+      toolbar: [
+        {
+          key: 'add',
+          label: this.key('add'),
+          icon: 'el-icon-plus',
+          type: 'primary',
+          auth: '/production_configuration/technology_model/technology_flow_category/create',
+          onClick: this.openAdd
+        }
+      ],
+      row: [
+        {
+          key: 'edit',
+          label: this.key('edit'),
+          icon: 'el-icon-edit',
+          auth: '/production_configuration/technology_model/technology_flow_category/edit',
+          onClick: this.openEdit
+        },
+        {
+          key: 'delete',
+          label: this.key('delete'),
+          icon: 'el-icon-delete',
+          color: 'danger',
+          auth: '/production_configuration/technology_model/technology_flow_category/delete',
+          onClick: this.handleDelete
+        }
+      ]
+    }, this.$permission)
+    this.toolbarButtons = btns.toolbarButtons
+    this.rowButtons = btns.rowButtons
+    this.fetchData()
+  },
+  methods: {
+    async fetchData () {
+      this.loading = true
+      try {
+        const res = await getProcessCategoryList({
+          ...this.search,
+          page_no: this.pagination.current,
+          page_size: this.pagination.size
+        })
+        const list = Array.isArray(res) ? res : (res.data || [])
+        const total = Array.isArray(res) ? res.length : (res.count || 0)
+        this.tableData = list
+        this.pagination.total = total
+      } finally {
+        this.loading = false
+      }
+    },
+    onSearch () {
+      this.pagination.current = 1
+      this.fetchData()
+    },
+    onReset () {
+      this.search = { code: '', name: '' }
+      this.pagination.current = 1
+      this.fetchData()
+    },
+    onPageChange (page) {
+      this.pagination.current = page.current
+      this.pagination.size = page.size
+      this.fetchData()
+    },
+    onSelect (rows) {
+      this.selectedRows = rows
+    },
+    resetForm () {
+      this.formData = { code: '', name: '', remark: '' }
+      this.editId = ''
+    },
+    openAdd () {
+      this.handleType = 'create'
+      this.dialogTitle = this.key('add_title')
+      this.$nextTick(() => {
+        this.$refs.dialogForm && this.$refs.dialogForm.reset()
+        this.resetForm()
+        this.dialogVisible = true
+      })
+    },
+    openEdit (row) {
+      this.handleType = 'edit'
+      this.dialogTitle = this.key('edit_title')
+      this.editId = row.id
+      this.formData = {
+        code: row.code,
+        name: row.name,
+        remark: row.remark || ''
+      }
+      this.dialogVisible = true
+    },
+    async onDialogSubmit () {
+      this.submitting = true
+      try {
+        if (this.handleType === 'create') {
+          await createProcessCategory(this.formData)
+        } else {
+          await editProcessCategory({ ...this.formData, id: this.editId })
+        }
+        this.$message.success(this.$t(this.key('operation_success')))
+        this.dialogVisible = false
+        this.fetchData()
+      } finally {
+        this.submitting = false
+      }
+    },
+    onDialogClose () {
+      this.resetForm()
+    },
+    async handleDelete (row) {
+      const cancelled = await this.$confirmAction(
+        {
+          message: this.key('confirm_delete'),
+          title: this.key('tip')
+        },
+        () => deleteProcessCategory({ id: [row.id] })
+      )
+      if (cancelled) return
+      this.$message.success(this.$t(this.key('operation_success')))
+      this.pagination.current = Math.min(
+        this.pagination.current,
+        Math.ceil((this.pagination.total - 1) / this.pagination.size) || 1
+      )
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search-bar {
+  padding: 10px 0;
+}
+/deep/ .el-form-item--mini.el-form-item {
+  margin-bottom: 4px;
+}
+</style>

src/views/production-master-data/product-management/product-list/index.vue

@@ -0,0 +1,284 @@
+<template>
+  <d2-container>
+    <template #header>
+      <div class="search-bar">
+        <el-form :inline="true" size="mini">
+          <el-form-item :label="$t(key('code'))">
+            <el-input
+              v-model="search.code"
+              :placeholder="$t(key('enter_code'))"
+              clearable
+              style="width:200px"
+              @keyup.enter.native="onSearch"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" @click="onSearch">
+              {{ $t(key('search')) }}
+            </el-button>
+            <el-button icon="el-icon-refresh" @click="onReset">
+              {{ $t(key('reset')) }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </template>
+
+    <page-table
+      ref="pageTable"
+      :columns="columns"
+      :data="tableData"
+      :loading="loading"
+      :toolbar-buttons="toolbarButtons"
+      :row-buttons="rowButtons"
+      :pagination="pagination"
+      help-url="/help/product-list"
+      :help-text="$t(ckey('help'))"
+      auto-height
+      @page-change="onPageChange"
+      @selection-change="onSelect"
+    />
+
+    <page-dialog-form
+      ref="dialogForm"
+      :visible.sync="dialogVisible"
+      :title="dialogTitle"
+      :width="'35%'"
+      :form-cols="formCols"
+      :form-data="formData"
+      :rules="rules"
+      :label-width="'100px'"
+      :submitting="submitting"
+      :confirm-text="key('confirm')"
+      :cancel-text="key('cancel')"
+      @submit="onDialogSubmit"
+      @close="onDialogClose"
+    />
+  </d2-container>
+</template>
+
+<script>
+import { useTableColumns } from '@/composables/useTableColumns'
+import { useTableButtons } from '@/composables/useTableButtons'
+import { i18nMixin } from '@/composables/useI18n'
+import { confirmMixin } from '@/composables/useConfirmHandle'
+import {
+  getProductList,
+  createProduct,
+  editProduct,
+  deleteProduct
+} from '@/api/production-master-data/product-management'
+import PageTable from '@/components/page-table'
+import PageDialogForm from '@/components/page-dialog-form'
+
+export default {
+  name: 'production-master-data-product-list',
+  components: { PageTable, PageDialogForm },
+  mixins: [i18nMixin('page.production_master_data.product_management.product_list'), confirmMixin],
+  data () {
+    return {
+      loading: false,
+      submitting: false,
+      tableData: [],
+      selectedRows: [],
+      dialogVisible: false,
+      dialogTitle: '',
+      editId: '',
+      handleType: 'create',
+      search: { code: '' },
+      pagination: { current: 1, size: 10, total: 0 },
+      formData: { code: '', name: '', remark: '' },
+      rules: {
+        code: [
+          { required: true, message: this.key('enter_code'), trigger: 'blur' },
+          { min: 1, max: 100, message: this.key('remark_length'), trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: this.key('enter_name'), trigger: 'blur' },
+          { min: 1, max: 100, message: this.key('remark_length'), trigger: 'blur' }
+        ]
+      },
+      columns: [],
+      toolbarButtons: [],
+      rowButtons: [],
+      formCols: [
+        [
+          {
+            type: 'input',
+            prop: 'code',
+            label: this.key('code'),
+            placeholder: this.key('enter_code'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ],
+        [
+          {
+            type: 'input',
+            prop: 'name',
+            label: this.key('name'),
+            placeholder: this.key('enter_name'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ],
+        [
+          {
+            type: 'input',
+            prop: 'remark',
+            inputType: 'textarea',
+            autosize: { minRows: 2, maxRows: 6 },
+            label: this.key('remark'),
+            placeholder: this.key('enter_remark'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ]
+      ]
+    }
+  },
+  created () {
+    this.columns = useTableColumns([
+      { prop: 'sort', label: this.key('sort'), width: 80 },
+      { prop: 'code', label: this.key('code'), minWidth: 120 },
+      { prop: 'name', label: this.key('name'), minWidth: 120 },
+      { prop: 'remark', label: this.key('remark') },
+      { prop: '_actions', label: this.key('operation'), width: 160, fixed: 'right' }
+    ])
+    const btns = useTableButtons({
+      toolbar: [
+        {
+          key: 'add',
+          label: this.key('add'),
+          icon: 'el-icon-plus',
+          type: 'primary',
+          auth: '/production_configuration/product_model/battery_model/create',
+          onClick: this.openAdd
+        }
+      ],
+      row: [
+        {
+          key: 'edit',
+          label: this.key('edit'),
+          icon: 'el-icon-edit',
+          auth: '/production_configuration/product_model/battery_model/edit',
+          onClick: this.openEdit
+        },
+        {
+          key: 'delete',
+          label: this.key('delete'),
+          icon: 'el-icon-delete',
+          color: 'danger',
+          auth: '/production_configuration/product_model/battery_model/delete',
+          onClick: this.handleDelete
+        }
+      ]
+    }, this.$permission)
+    this.toolbarButtons = btns.toolbarButtons
+    this.rowButtons = btns.rowButtons
+    this.fetchData()
+  },
+  methods: {
+    async fetchData () {
+      this.loading = true
+      try {
+        const res = await getProductList({
+          ...this.search,
+          page_no: this.pagination.current,
+          page_size: this.pagination.size
+        })
+        const list = Array.isArray(res) ? res : (res.data || [])
+        const total = Array.isArray(res) ? res.length : (res.count || 0)
+        this.tableData = list
+        this.pagination.total = total
+      } finally {
+        this.loading = false
+      }
+    },
+    onSearch () {
+      this.pagination.current = 1
+      this.fetchData()
+    },
+    onReset () {
+      this.search = { code: '' }
+      this.pagination.current = 1
+      this.fetchData()
+    },
+    onPageChange (page) {
+      this.pagination.current = page.current
+      this.pagination.size = page.size
+      this.fetchData()
+    },
+    onSelect (rows) {
+      this.selectedRows = rows
+    },
+    resetForm () {
+      this.formData = { code: '', name: '', remark: '' }
+      this.editId = ''
+    },
+    openAdd () {
+      this.handleType = 'create'
+      this.dialogTitle = this.key('add_title')
+      this.$nextTick(() => {
+        this.$refs.dialogForm && this.$refs.dialogForm.reset()
+        this.resetForm()
+        this.dialogVisible = true
+      })
+    },
+    openEdit (row) {
+      this.handleType = 'edit'
+      this.dialogTitle = this.key('edit_title')
+      this.editId = row.id
+      this.formData = {
+        code: row.code,
+        name: row.name,
+        remark: row.remark || ''
+      }
+      this.dialogVisible = true
+    },
+    async onDialogSubmit () {
+      this.submitting = true
+      try {
+        if (this.handleType === 'create') {
+          await createProduct(this.formData)
+        } else {
+          await editProduct({ ...this.formData, id: this.editId })
+        }
+        this.$message.success(this.$t(this.key('operation_success')))
+        this.dialogVisible = false
+        this.fetchData()
+      } finally {
+        this.submitting = false
+      }
+    },
+    onDialogClose () {
+      this.resetForm()
+    },
+    async handleDelete (row) {
+      const cancelled = await this.$confirmAction(
+        {
+          message: this.key('confirm_delete'),
+          title: this.key('tip')
+        },
+        () => deleteProduct({ id: [row.id] })
+      )
+      if (cancelled) return
+      this.$message.success(this.$t(this.key('operation_success')))
+      this.pagination.current = Math.min(
+        this.pagination.current,
+        Math.ceil((this.pagination.total - 1) / this.pagination.size) || 1
+      )
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search-bar {
+  padding: 10px 0;
+}
+/deep/ .el-form-item--mini.el-form-item {
+  margin-bottom: 4px;
+}
+</style>

src/views/system-administration/system-utilities/problem-help/components/MenuTree/index.vue

@@ -16,10 +16,10 @@
           <slot name="submenu" :menu-data="item" :menu-id="item.id" />
         </template>
         <MenuTree :data-list="item.children">
-          <template slot="menu" scope="ctx">
+          <template slot="menu" slot-scope="ctx">
             <slot name="menu" :menu-id="ctx.menuId" :type="ctx.type" :file-list="ctx.fileList" />
           </template>
-          <template slot="submenu" scope="ctx">
+          <template slot="submenu" slot-scope="ctx">
             <slot name="submenu" :menu-data="ctx.menuData" :menu-id="ctx.menuId" />
           </template>
         </MenuTree>

src/views/system-administration/system-utilities/problem-help/index.vue

@@ -68,7 +68,7 @@
           @open="handleOpen"
         >
           <MenuTree :data-list="problemTree">
-            <template slot="menu" scope="ctx">
+            <template slot="menu" slot-scope="ctx">
               <div class="menu-actions">
                 <el-button
                   v-if="ctx.type === 'file'"