JG-ADMIN-TEMP/src/views/base/frock/components/drawing-page.vue

<template>
  <div class="mainContentBox">
    <avue-form ref="formRef" v-model="form" :option="option" @submit="rowSave">
      <template #drawingPath="scope">
        <!--        <single-upload v-model="form.drawingPath" :generatePdf="true"/>-->
        <FilesUpload
          v-model:src-list="srcList"
          v-model:pdf-list="pdfUrlList"
          v-model:file-name-list="fileNameList"
          v-model:file-list="fileList"
          :limit="10"
          :generate-pdf="true"
          @finished="testFiles"
          :key="uploadKey"
        />
      </template>
    </avue-form>
    <avue-crud
      ref="crudRef"
      v-model:search="search"
      v-model="form"
      :data="data"
      :option="option"
      v-model:page="page"
      @row-save="addRow"
      @row-update="updateRow"
      @row-del="deleteRow"
      @search-change="searchChange"
      @search-reset="resetChange"
      @size-change="dataList"
      @current-change="dataList"
      @selection-change="selectionChange"
      search-option="false"
    >
      <template #menu-left="{ size }">
        <el-button
          :disabled="toDeleteIds.length < 1"
          type="danger"
          icon="el-icon-delete"
          :size="size"
          @click="multipleDelete"
          >删除</el-button
        >
        <el-select
          v-model="version"
          placeholder="请选择BOM版本"
          style="width: 150px; margin-left: 15px"
          @change="getVersionDrawing"
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </template>
      <template #menu="{ row, index, type }">
        <PDFView
          :need-to-show-pdf="true"
          content-type="button"
          :is-link="true"
          :show-pdf-number="1"
          :pdf-source="filePath + row.pdfPath"
        />
      </template>
    </avue-crud>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import ButtonPermKeys from "@/common/configs/buttonPermission";
import { useCommonStoreHook } from "@/store";
import { useDictionaryStore } from "@/store";
import { addDrawing, getDrawing } from "@/api/drawing";
const { isShowTable, tableType } = toRefs(useCommonStoreHook());
const fileList = ref([]);
const uploadKey = ref(false);
const { dicts } = useDictionaryStore();
const filePath = import.meta.env.VITE_APP_UPLOAD_URL;
const test = () => {
  isShowTable.value = true;
  tableType.value = tableType.value == 1 ? 2 : 1;
};
const testFiles = () => {
  form.value.pdfPathList = pdfUrlList.value;
  form.value.drawingPathList = srcList.value;
  form.value.drawingPath = srcList.value[0];
  form.value.fileNameList = fileNameList.value;
};
// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/base/drawing",
  });
const { dataList } = Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
// checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
// const permission = reactive({
//   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
//   addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
//   editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
//   menu: true,
// });
const formRef = ref(null);
const version = ref({
  value: "0",
  label: "请选择图纸版本",
});
const options = ref([]);
const fileUrl = ref(""); //单文件
const pdfUrlList = ref([]);
const srcList = ref([]);
const fileNameList = ref([]);
import dictDataUtil from "@/common/configs/dictDataUtil";
const getVersionDrawing = () => {
  if (version.value.value != "0") {
    search.value.materialCode = props.materialCode;
    search.value.drawingVersion = version.value;
    dataList();
  }
};
const addRow = (form2, done) => {
  createRow(form, done, done);
  pdfUrlList.value = [];
  srcList.value = [];
  fileNameList.value = [];
};
function rowSave(form, done) {
  form.associationCode = props.materialCode;
  form.associationName = props.materialName;
  addDrawing(form).then((data) => {
    if (data.code === "200") {
      ElMessage({
        message: data.msg,
        type: "success",
      });
      fileNameList.value = [];
      srcList.value = [];
      pdfUrlList.value = [];
      fileList.value = [];
      formRef.value.resetForm();
      uploadKey.value = !uploadKey.value;
      dataList();
    } else {
      ElMessage({
        message: data.msg,
        type: "error",
      });
    }
  });
  done();
}

onMounted(() => {
  // console.log("crudRef", crudRef)
  getDrawing(props.materialCode).then((data) => {
    if (data.code === "200") {
      options.value = Array.from(data.data);
    } else {
      ElMessage({
        message: data.msg,
        type: "error",
      });
    }
  });
  search.value.materialCode = props.materialCode;
  dataList();
});

const ctableRef = ref(null);

// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  searchEnter: true,
  selection: true,
  column: [
    {
      label: "物料编号",
      prop: "associationCode",
      hide: true,
      display: false,
    },

    {
      label: "物料编号",
      prop: "associationName",
      hide: true,
      display: false,
    },

    {
      label: "图纸编号",
      prop: "drawingCode",
      rules: [
        {
          required: true,
          message: "图纸编号不能为空",
          trigger: "blur",
        },
      ],
    },
    {
      label: "图纸标题",
      prop: "drawingTitle",
      rules: [
        {
          required: true,
          message: "图纸名称不能为空",
          trigger: "blur",
        },
      ],
    },

    {
      label: "图纸类型",
      prop: "drawingDictValue",
      filterable: true,
      type: "select",
      width: 100,
      overHidden: true,
      dicUrl: dictDataUtil.request_url + "drawing_type",
      props: { label: "dictLabel", value: "dictValue" },
      rules: [
        {
          required: true,
          message: "请选择物料属性",
          trigger: "blur",
        },
      ],
    },
    {
      label: "文件名称",
      prop: "fileName",
      span: 24,
      width: 120,
      overHidden: true,
      display: false,
    },
    {
      label: "文件数组",
      prop: "drawingPathList",
      span: 24,
      hide: true,
      display: false,
    },
    {
      label: "pdf数组",
      prop: "pdfPathList",
      span: 24,
      hide: true,
      display: false,
    },

    {
      label: "文件名称数组",
      prop: "fileNameList",
      span: 24,
      slot: true,
      hide: true,
      display: false,
    },
    {
      label: "版本",
      prop: "drawingVersion",
      type: "number",
      precision: 1,
      rules: [
        {
          required: true,
          message: "版本号不能为空",
          trigger: "blur",
        },
      ],
      click() {
        dialog1.visible = true;
      },
    },
    {
      label: "图纸上传",
      prop: "drawingPath",
      span: 24,
      slot: true,
      hide: true,

      rules: [
        {
          required: true,
          message: "图纸上传不能为空",
          trigger: "blur",
        },
      ],
      /*formatter: (row, column, cellValue, index) => {
          return `<img src="${row.drawingPath}" alt="${row.drawingPath}" width="50" height="50">`;
        }
*/
    },
  ],
  delBtn: false,
  editBtn: false,
  viewBtn: false,
  addBtn: false,
});
const props = defineProps({
  materialCode: {
    type: String,
    default: () => {
      return 0;
    },
  },
  materialName: {
    type: String,
    default: () => {
      return 0;
    },
  },
  dialog: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
</script>