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

<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"
              @change="onSearch"
            >
              <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-table>

    <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 {
  getProductionLineList,
  createProductionLine,
  editProductionLine,
  deleteProductionLine,
  exportProductionLineTask
} 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')],
  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('length_1_100'), trigger: 'blur' }
        ],
        name: [
          { required: true, message: this.key('enter_name'), trigger: 'blur' },
          { min: 1, max: 100, message: this.key('length_1_100'), trigger: 'blur' }
        ],
        area_id: [
          { required: true, message: this.key('select_area'), trigger: 'change' }
        ],
        remark: [
          { max: 500, message: this.key('remark_max_500'), trigger: 'blur' }
        ]
      },
      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 cols = JSON.parse(JSON.stringify(this.baseFormCols))
      cols[2][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 },
        { key: 'export', label: this.key('export'), icon: 'el-icon-download', auth: '/production_configuration/factory_model/factory_line/export', onClick: this.handleExport }
      ],
      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: {
    normalizeResponse (res) {
      const data = res && res.data !== undefined ? res.data : res
      if (Array.isArray(data)) return { list: data, total: data.length }
      if (data && Array.isArray(data.list)) return { list: data.list, total: Number(data.count || data.total || data.list.length) }
      if (data && Array.isArray(data.data)) return { list: data.data, total: Number(data.count || data.total || data.data.length) }
      if (data && data.data && Array.isArray(data.data.data)) return { list: data.data.data, total: Number(data.data.count || data.data.total || data.data.data.length) }
      return { list: [], total: 0 }
    },
    async initAreaOptions () {
      try {
        const res = await getFactoryAreaALL()
        const data = this.normalizeResponse(res).list
        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 data = this.normalizeResponse(res)
        this.tableData = data.list
        this.pagination.total = data.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 confirmAction (message, action) {
      try {
        await this.$confirm(this.$t(message), this.$t(this.key('tip')), { type: 'warning' })
      } catch {
        return false
      }
      await action()
      return true
    },
    async handleDelete (row) {
      const ok = await this.confirmAction(this.key('confirm_delete'), () => deleteProductionLine({ id: [row.id] }))
      if (!ok) 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()
    },
    async handleExport () {
      const ok = await this.confirmAction(this.key('confirm_export'), () => exportProductionLineTask({ ...this.search }))
      if (ok) this.$message.success(this.$t(this.key('operation_success')))
    }
  }
}
</script>

<style scoped>
.search-bar { padding: 10px 0; }
/deep/ .el-form-item--mini.el-form-item { margin-bottom: 4px; }
</style>