JG-ADMIN-TEMP/src/views/base/craftManagement/route/components/bottomTable.vue

<template>
  <div>
    <avue-crud
      ref="crudRef"
      v-model:search="search"
      v-model="form"
      :data="data"
      :option="option"
      v-model:page="page"
      @row-save="createRow"
      @row-update="updateRow"
      @row-del="deleteRow"
      @selection-change="selectionChange"
      @sortable-change="onSortChange"
      @search-change="searchChange"
      @search-reset="resetChange"
      @size-change="dataList"
      @current-change="dataList"
    >
      <template #imgUrl-form="scope">
        <single-upload v-model="form.imgUrl" />
      </template>
      <template #imgUrl="{ row }">
        <el-button link type="primary" @click.stop="imgUrlClick(row)">{{
          row.imgUrl
        }}</el-button>
      </template>
    </avue-crud>
    <CommonTable
      ref="commonTableRef"
      :tableTitle="tableTitle"
      :tableType="commonTableType"
      @selected-sure="onSelectedFinish"
    />
    <el-dialog v-model="dialogVisible">
      <img w-full :src="previewImgUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import { getTableConfig } from "./configs";
import { saveCompoents } from "@/api/craft/process/index";
import SingleUpload from "@/components/Upload/SingleUpload.vue";

const props = defineProps({
  tableTitle: {
    default: "",
    type: String,
  },
  tableType: {
    default: "",
    type: String,
  },
});

const route = useRoute();
const tableConfig = getTableConfig(route.params.id);

// 传入一个url，后面不带/
const { url, form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: tableConfig[props.tableType].url,
  });

const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  Methords; //增删改查
const { selectionChange, multipleUpdate } = Methords; //选中和批量删除事件

const crudRef = ref(null); //crudRef.value 获取avue-crud对象

const startCreat = () => {
  if (props.tableType === "wuliaocaiji") {
    commonTableRef.value && commonTableRef.value.startSelect({ hhhh: "ddddd" });
  } else {
    crudRef.value && crudRef.value.rowAdd();
  }
};

const saveSortData = async () => {
  multipleUpdate();
};

defineExpose({ startCreat, saveSortData });

const onSortChange = () => {
  data.value.forEach((item) => {
    console.log(item.id);
  });
};

// ============公共弹窗table选择相关，物料采集等使用===============
const commonTableRef = ref({});
const commonTableType = ref("MARTERIAL_BOM");
const onSelectedFinish = (itemValue) => {
  crudRef.value && crudRef.value.rowAdd();
  if (props.tableType === "wuliaocaiji") {
    form.value.itemName = itemValue.materialName;
    form.value.itemCode = itemValue.materialCode;
    form.value.itemModel = itemValue.spec;
    form.value.num = 1;
    form.value.traceType = "S";
    form.value.unit = itemValue.unitDictValue;
  }
};

const previewImgUrl = ref("");
const dialogVisible = ref(false);
const imgUrlClick = (itemValue) => {
  previewImgUrl.value = itemValue.imgUrl;
  dialogVisible.value = true;
};

onMounted(() => {
  search.value.operationId = route.params.id;
  url.value = tableConfig[props.tableType].url;
  option.value = Object.assign(option.value, {
    addBtn: false,
    searchShow: false,
    header: false,
    sortable: true,
    column: tableConfig[props.tableType].column,
  });
  dataList();
});

watch(
  () => props.tableType,
  () => {
    console.log("faslegb");
    url.value = tableConfig[props.tableType].url;
    option.value = Object.assign(option.value, {
      addBtn: false,
      searchShow: false,
      header: false,
      sortable: true,
      column: tableConfig[props.tableType].column,
    });
    dataList();
  }
);
</script>