JG-ADMIN-TEMP/src/views/base/signature/index.vue

<template>
  <div class="mainContentBox">
    <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"
    >
      <template #drawingPath-form="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"
          :limit="10"
          :generate-pdf="true"
          @finished="testFiles"
        />
      </template>
      <template #signatureState="scope">
        <el-switch
          active-value="1"
          inactive-value="0"
          inline-prompt
          active-text="启用"
          inactive-text="禁用"
          v-model="scope.row.signatureState"
          @click="changeItem(scope.row)"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </template>
      <template #menu="{ row, index, type }">
        <a :href="downloadUrl(row.signatureFiles)"
          ><el-button type="primary" text>下载</el-button>
        </a>
        <el-button @click="toEdiet(row)" text type="primary">修改</el-button>
        <el-button @click="deleteRecord(row, index, done)" text type="primary"
          >删除</el-button
        >
        <el-button @click="toLook(row.signatureFiles)" text type="primary"
          >预览</el-button
        >
      </template>
      <template #menu-left="{ size }">
        <el-button
          type="primary"
          @click="
            editStatus = false;
            addShow = true;
          "
          >新增</el-button
        >
      </template>
    </avue-crud>
    <div id="imgeview">
      <el-image
        style="width: 1px; height: 1px"
        :src="Logo"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :initial-index="0"
        :preview-src-list="imgSrcList"
        :hide-on-click-modal="true"
        fit="cover"
      />
    </div>
  </div>

  <OpSignature v-if="addShow" @close="closeShow" :editStatus :rowObj />
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import Logo from "@/assets/logo.png";
import { useCommonStoreHook, useDictionaryStore } from "@/store";
import { updateSignature } from "@/api/signature";
import dictDataUtil from "@/common/configs/dictDataUtil";
import PDFView from "@/components/PDFView/index.vue";
import OpSignature from "./components/opSignature.vue";
const { isShowTable, tableType } = toRefs(useCommonStoreHook());
// 数据字典相关
const { dicts } = useDictionaryStore();
const downloadUrl = (url) => {
  return url;
};
const toLook = (url) => {
  imgSrcList.value = [];
  imgSrcList.value.push(url);
  setTimeout(() => {
    document
      .getElementById("imgeview")
      .firstElementChild.firstElementChild.click();
  }, 0);
};
const rowObj = ref(null);
const toEdiet = (row) => {
  editStatus.value = true;
  rowObj.value = row;
  addShow.value = true;
};
const imgSrcList = ref([]);
const editStatus = ref(false);
const addShow = ref(false);
const closeShow = () => {
  addShow.value = false;
  dataList();
};

const pdfUrlList = ref([]);
const srcList = ref([]);
const fileNameList = ref([]);
const testFiles = () => {
  form.value.pdfPathList = pdfUrlList.value;
  form.value.drawingPathList = srcList.value;
  form.value.drawingPath = srcList.value[0];
  form.value.fileNameList = fileNameList.value;
};

const changeItem = (row) => {
  updateSignature(row).then(() => {
    ElMessage.success("操作成功");
    dataList();
  });
};

const addRow = (form2, done) => {
  createRow(form, done, done);
  pdfUrlList.value = [];
  srcList.value = [];
  fileNameList.value = [];
};
// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/base/signature",
  });
const {
  dataEditList,
  createRow,
  updateRow,
  deleteRow,
  searchChange,
  dataList,
  resetChange,
} = Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具

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

onMounted?.(() => {
  dataEditList();
});

// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  selection: false,
  viewBtn: false,
  editBtn: false,
  delBtn: false,
  menu: true,
  addBtn: false,
  column: [
    {
      label: "签章名称",
      prop: "signatureName",
      search: true,
      overHidden: true,
    },
    {
      label: "签章人名称",
      prop: "signUser",
      search: true,
      overHidden: true,
    },
    {
      label: "签章类型",
      prop: "signatureType",
      overHidden: true,
      search: true,
      type: "select",
      dicData: dicts.signature_type,
      props: { label: "dictLabel", value: "dictValue" },
    },
    {
      label: "签章归属",
      prop: "signatureAttribution",
      type: "select",
      search: true,
      overHidden: true,
      editDisplay: false,
      addDisplay: false,
      dicData: dicts.signature_attribution,
      props: { label: "dictLabel", value: "dictValue" },
    },

    {
      label: "创建时间",
      prop: "created",
      overHidden: true,
      display: false,
    },
    {
      label: "启用状态",
      slot: true,
      headerAlign: "center",
      prop: "signatureState",
      width: 100,
      addDisplay: false,
    },
  ],
});

const deleteRecord = (row, index, done) => {
  deleteRow(row, index, done);
  dataEditList();
};
</script>
<style lang="scss" scoped>
#imgeview {
  position: fixed;
  top: -2px;
  z-index: 99999;
}
</style>