<template>
  <div class="page-container column-container">
    <!-- 搜索区域 -->
    <el-form class="list-search-container" :inline="true">
      <el-form-item class="section-title" label="标准工序" />
      <el-form-item>
        <el-button v-show="false" type="primary" icon="Plus" @click="handleShowProcessDialog(null)" v-hasPermi="['business:process:add']">新增</el-button>
        <el-button type="primary" icon="Refresh" @click="handleSync" v-hasPermi="['business:process:sync']" >同步P2工序</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表区 -->
    <div class="el-table-container">
      <div class="el-table-inner-container">
        <el-table v-loading="loading" :data="processList" height="100%" @selection-change="handleSelectionChange">
          <el-table-column label="行号" type="index" width="50" align="center" />
          <el-table-column label="工序编码" width="100" align="center" prop="processCode" />
          <el-table-column label="工序简称" width="100" align="center" prop="processAlias" />
          <el-table-column label="状态" width="100" align="center">
            <template #default="scope">
              <dict-tag :options="process_status" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" header-align="center" />
          <el-table-column v-if="false" label="操作" width="140" align="center">
            <template #default="scope">
              <el-button link type="warning" icon="Edit" @click="handleShowProcessDialog(scope.row.id)" v-hasPermi="['business:process:edit']"
                >编辑</el-button
              >
              <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['business:process:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 新增工序表单 -->
    <process-form ref="processRef" @handleSaveSuccess="handleRefreshProcess" />
  </div>
</template>

<script setup name="Process">
import { listProcess, delProcess } from '@/api/business/process'
import { getP2Process } from "@/api/business/p2.js";
import processForm from './form'
const { proxy } = getCurrentInstance()
/** 字典数组区 */
const { process_status } = proxy.useDict('process_status')
/** 标准工序*/
const processList = ref([])
const loading = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
/** 查询对象 */
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  code: '',
  name: ''
})

onMounted(() => {
  getList()
})
/***********************  方法区  ****************************/

/** 查询标准工序管理列表 */
function getList() {
  loading.value = false
  listProcess(queryParams.value).then((response) => {
    processList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleRefreshProcess() {
  queryParams.value.pageNum = 1
  getList()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleShowProcessDialog(id) {
  proxy.$refs.processRef.open(id)
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal
    .confirm('是否确认删除选中的数据项？')
    .then(function () {
      return delProcess(_ids)
    })
    .then(() => {
      proxy.$modal.msgSuccess('删除成功！')
      getList()
    })
    .catch(() => {})
}

/** 工艺添加取消操作 */
function handleSync() {
  loading.value = true;
  getP2Process().then((res) => {
    getList();
  });
};
</script>
