ezhizao_dms_vue/src/views/business/workshop/index.vue

<template>
  <div class="page-container row-container">
    <!-- 左侧区域 -->
    <section class="list-part-container" style="flex: 2">
      <!-- 搜索区 -->
      <el-form class="list-search-container" :model="queryDeptParams" ref="queryRef" :inline="true">
        <el-form-item class="section-title" label="车间管理" />
        <el-form-item>
          <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
        </el-form-item>
        <el-form-item label="车间名称：" prop="name">
          <el-input v-model.trim="queryParams.name" placeholder="请输入车间名称" @keydown.enter.prevent @keyup.enter="handleSearch" clearable style="width: 155px" />
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="Search" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <!-- 列表区 -->
          <el-table ref="workshopTable" v-loading="loading" :data="workshopList" row-key="id" height="100%" :indent="20" default-expand-all highlight-current-row @current-change="handleGetDept">
            <el-table-column label="行号" type="index" width="50" align="center" />
            <el-table-column label="车间名称" prop="name" align="center" />
            <el-table-column label="操作" width="150" align="center">
              <template #default="scope">
                <el-button link type="warning" icon="Edit" @click="handleUpdateWorkshop(scope.row)">编辑</el-button>
                <el-button link type="danger" icon="Delete" @click="handleDeleteWorkshop(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </section>

    <!-- 右侧区域 -->
    <section class="list-part-container" style="flex: 3">
      <!-- 搜索区 -->
      <el-form class="list-search-container" :model="queryDeptParams" ref="queryRef" :inline="true">
        <el-form-item class="section-title" label="工段" />
        <el-form-item>
          <el-button type="primary" icon="Plus" @click="handleAddDept">新增</el-button>
          <el-button type="danger" icon="Delete" :disabled="ids.length == 0" @click="handleDeptDelete">
            删除</el-button>
        </el-form-item>
      </el-form>

      <!-- 列表区 -->
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table v-loading="deptLoading" :data="deptList" :row-key="getRowKey" height="100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" align="center" />
            <el-table-column type="index" label="行号" width="50" align="center" />
            <el-table-column label="工段名称" prop="deptName" align="center" />
            <el-table-column label="工段编码" prop="deptCode" align="center" />
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <pagination v-show="total > 0" :total="total" v-model:page="queryDeptParams.pageNum" v-model:limit="queryDeptParams.pageSize" @pagination="getdeptList" />
    </section>

    <!-- 表单 -->
    <workshop-form ref="workshopRef" @handleSaveSuccess="getList" />
    <dept-form ref="deptChoiceRef" :multiple="true" :multiple-selected="handleDeptSelected" />
  </div>
</template>
<script setup >
import { listWorkshop, delWorkshop } from '@/api/business/workshop'
import { listDept, updateDeptWorkshop, updateDeptWorkshopByDeptId } from '@/api/system/dept'
import deptForm from '@/views/business/workshop/DialogDept'
import workshopForm from './form'
const { proxy } = getCurrentInstance()

const workshopList = ref([])
const deptList = ref([])
const loading = ref(false)
const deptLoading = ref(false)
const currentWorkshop = ref({})
const total = ref(0)
const ids = ref([])
const workshopIds = ref([])
/** 查询对象 */
const queryParams = ref({
  name: ''
})
const queryDeptParams = ref({
  deptCode: ''
})

/***********************  方法区  ****************************/

/** 查询车间管理列表 */
function getList() {
  loading.value = true
  listWorkshop(queryParams.value).then((res) => {
    if (res.code == 200) {
      workshopList.value = res.rows
      if (workshopList.value.length > 0) {
        proxy.$refs.workshopTable.setCurrentRow(workshopList.value[0])
      } else {
        deptList.value = []
      }
    }
  })
  loading.value = false
}
function handleSearch() {
  getList()
}

//打开添加工段
const handleAddDept = () => {
  handleAddBatchDept()
}
/** 多选添加 */
function handleAddBatchDept() {
  let deptIds = []
  deptIds = deptList.value.map((item) => {
    return item.deptId
  })
  proxy.$refs.deptChoiceRef.open(deptIds)
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => {
    return item.deptId
  })
  console.log(ids.value)
}
/** 获取行 id */
function getRowKey(row) {
  return row.deptId
}
/** 新增按钮操作 */
function handleAdd() {
  proxy.$refs.workshopRef.open()
}

/** 修改按钮操作 */
function handleUpdateWorkshop(row) {
  proxy.$refs.workshopRef.open(row)
}

/**车间表点击事件 */
function handleGetDept(row) {
  if (row) {
    currentWorkshop.value = row
  }
  getdeptList()
}
//工段多选带回
function handleDeptSelected(selection) {
  let deptInfo = {}
  let deptIds = []
  deptIds = selection.map((item) => {
    return item.deptId
  })
  deptInfo.workshopId = currentWorkshop.value.id
  deptInfo.ids = deptIds
  console.log(deptInfo)
  updateDeptWorkshop(deptInfo).then((res) => {
    if (res.code == 200) {
      handleGetDept(currentWorkshop.value)
      proxy.$modal.msgSuccess('添加成功！')
    }
  })
}
function getdeptList() {
  queryDeptParams.value.workshopId = currentWorkshop.value.id
  listDept(queryDeptParams.value).then((res) => {
    console.log(res)
    if (res.code == 200) {
      deptList.value = res.rows
      total.value = res.total
      deptLoading.value = false
    }
  })
}

/** 删除按钮操作 */
function handleDeleteWorkshop(row) {
  const _ids = row.id
  proxy.$modal
    .confirm('是否确认删除选中的车间？')
    .then(function () {
      return delWorkshop(_ids)
    })
    //删除车间的同时删除工段上workId
    .then(function () {
      return updateDeptWorkshopByDeptId({ workshopId: _ids })
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('删除成功！')
    })
    .catch(() => {})
}
/** 车间工段删除按钮操作 */
function handleDeptDelete(row) {
  updateDeptWorkshop({ ids: ids.value }).then((res) => {
    if (res.code == 200) {
      handleGetDept(currentWorkshop.value)
      proxy.$modal.msgSuccess('删除成功！')
    }
  })
}

onMounted(() => {
  getList()
})
</script>