﻿<template>
  <div class="mesMaterial-container">
    <el-dialog v-model="isShowDialog" width="80%" draggable="" :before-close="closeDialog" destroy-on-close>
      <template #header>
        <div style="color: #fff">
          <!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
          <span>{{ props.title }} - {{ props.isMore ? '多选' : '单选' }}</span>
        </div>
      </template>
      <el-row :gutter="10" style="height: 100%;">
        <el-col :span="4" style="height: 500px;">
          <treeFilter @node-click="typeClick"></treeFilter>
        </el-col>
        <el-col :span="20" style="display: flex;flex-direction: column;">
          <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
            <el-form :model="queryParams" ref="queryForm" labelWidth="90">
              <el-row style="height: 100%;">
                <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                  <el-form-item label="MES编码">
                    <el-input v-model="queryParams.materialCode" clearable="" placeholder="请输入MES编码" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                  <el-form-item label="MES名称">
                    <el-input v-model="queryParams.materialName" clearable="" placeholder="请输入MES名称" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                  <el-form-item label="存货代码">
                    <el-input v-model="queryParams.materialNo" clearable="" placeholder="请输入存货代码" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="4" class="mb10" v-if="showAdvanceQueryUI">
                <el-form-item label="规格">
                  <el-input v-model="queryParams.specs" clearable="" placeholder="请输入规格" />
                </el-form-item>
              </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10 ml10">
                  <el-button-group>
                    <el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'mesMaterial/page'"> 查询
                    </el-button>
                    <el-button icon="ele-Refresh" @click="() => queryParams = {}"> 重置 </el-button>
                  </el-button-group>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <el-card class="full-table" shadow="hover" style="margin-top: 8px;">
            <el-table :data="tableData" style="width: 100%" v-loading="loading" ref="tableRef" tooltip-effect="light"
              row-key="id" border="" @selection-change="onSelectionChange">
              <el-table-column type="index" label="序号" width="55" align="center" />
              <el-table-column type="selection" :reserve-selection="true" width="55" align="center" />
              <el-table-column prop="materialCode" label="MES编码" width="140" show-overflow-tooltip="" />
              <el-table-column prop="materialName" label="MES名称" width="140" show-overflow-tooltip="" />
              <el-table-column prop="materialTypeCode" label="存货分类" width="90" show-overflow-tooltip="">
                <template #default="scope">
                  <span>{{ scope.row.materialTypeCodeMaterialTypeName }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="drawingNo" label="图号" width="140" show-overflow-tooltip="" />
              <el-table-column prop="specs" label="规格型号" width="140" show-overflow-tooltip="" />
              <el-table-column prop="materialNo" label="存货代码" width="140" show-overflow-tooltip="" />
              <el-table-column prop="unitGroupName" label="计量单位组名称" width="105" show-overflow-tooltip="" />
              <el-table-column prop="unitName" label="计量单位名称" width="90" show-overflow-tooltip="" />
              <el-table-column prop="unitWeightLength" label="产品单重长度" width="90" show-overflow-tooltip="" />
              <el-table-column prop="inOutRecord" label="出库跟踪入库" width="90" show-overflow-tooltip="" />
              <el-table-column prop="aBCType" label="ABC分类" width="140" show-overflow-tooltip="" />
              <el-table-column prop="featureSelection" label="特征选配" width="140" show-overflow-tooltip="" />
              <el-table-column prop="activeDate" label="启用日期" width="140" show-overflow-tooltip="" />
              <el-table-column prop="disabledDate" label="停用日期" width="140" show-overflow-tooltip="" />
            </el-table>
            <el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
              :total="tableParams.total" :page-sizes="[10, 20, 50, 100, 200, 500]" small="" background=""
              @size-change="handleSizeChange" @current-change="handleCurrentChange"
              layout="total, sizes, prev, pager, next, jumper" />
          </el-card>
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定（{{ selectionNum }}条）</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup="" name="mesMaterial">
import { ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { auth } from '/@/utils/authFunction';
import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
import { formatDate } from '/@/utils/formatTime';

import { pageMesMaterial, deleteMesMaterial } from '/@/api/mes/mesMaterial';

import treeFilter from '/@/views/mes/mesMaterialType/component/treeFilter.vue'
import { nextTick } from "vue";

var props = defineProps({
  /**
   * 标题
   */
  title: {
    type: String,
    default: "",
  },
  isAny: {
    type: Boolean,
    default: false,
  },

  /**
   * 是否多选
   */
  isMore: {
    type: Boolean,
    default: true,
  }
});

const showAdvanceQueryUI = ref(true);
const loading = ref(false);
const tableData = ref<any>([]);
const queryParams = ref<any>({});
const productType = ref<any>();
const tableParams = ref({
  page: 1,
  pageSize: 10,
  total: 0,
});

const tableRef = ref<any>();
const isShowDialog = ref(false);
const options = ref<any>({});
//已选择的条数
const selectionNum = ref<number>(0);

//父级传递来的函数，用于回调
const emit = defineEmits(["finish"]);

// 打开弹窗
const openDialog = async (_options: any) => {
  options.value = _options;
  if (!options.value.codes) {
    options.value.codes = [];
  }
  console.log(_options)
  if (_options.productType) {
    productType.value = _options.productType;
  }
  handleQuery(true);
  isShowDialog.value = true;
};
// 选择一个
const selectOne = (row: any) => {
  emit("finish", row);
  isShowDialog.value = false;
}
// 关闭弹窗
const closeDialog = () => {
  isShowDialog.value = false;
  tableRef.value.clearSelection();
};

// 取消
const cancel = () => {
  isShowDialog.value = false;
  tableRef.value.clearSelection();
};

//确定
const confirm = () => {
  emit("finish", { rows: tableRef.value.getSelectionRows() });
  isShowDialog.value = false;
}

// 选择行变更
const onSelectionChange = async () => {
  if (props.isMore == false) {
    //单选
    var rows = tableRef.value.getSelectionRows();

    if (rows && rows.length > 1) {
      var lastRow = rows[rows.length - 1];
      tableRef.value.clearSelection();
      await nextTick();
      tableRef.value.toggleRowSelection(lastRow, true);
    }
  }
  selectionNum.value = tableRef.value.getSelectionRows().length;
}

// 查询操作
const handleQuery = async (first?: boolean) => {
  loading.value = true;
  if (productType.value) {
    queryParams.value.productType = productType.value
  }
  var res = await pageMesMaterial(Object.assign(queryParams.value, tableParams.value));
  tableData.value = res.data.result?.items ?? [];
  tableParams.value.total = res.data.result?.total;
  if (first && tableData.value) {
    tableData.value.forEach((el: any) => {
      if (options.value.codes.indexOf(el.materialCode) > -1) {
        tableRef.value.toggleRowSelection(el, true);
      }
    });
  }
  loading.value = false;
};

// 改变页面容量
const handleSizeChange = (val: number) => {
  tableParams.value.pageSize = val;
  handleQuery();
};

// 改变页码序号
const handleCurrentChange = (val: number) => {
  tableParams.value.page = val;
  handleQuery();
};
// 点击树形筛选
const typeClick = (item: any) => {
  queryParams.value.materialTypeCode = item.materialTypeCode;
  handleQuery();
}



//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>
<style scoped>
:deep(.el-ipnut),
:deep(.el-select),
:deep(.el-input-number) {
  width: 100%;
}
</style>

