附件上传

src/views/ea/electronicAssets/index.vue

@@ -1,81 +1,35 @@
 <template>
   <div class="app-container">
     <!-- 搜索工作栏 -->
-    <el-form
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
-      :model="queryParams"
-      ref="queryForm"
-      size="small"
-      :inline="true"
-      v-show="showSearch"
-      label-width="98px"
-    >
       <el-form-item label="业务实体名称" prop="company">
-        <el-select
+        <el-select v-model="queryParams.company" placeholder="请选择业务实体" value-key="id" @change="handleCompanyChange1"
-          v-model="queryParams.company"
+          clearable @keyup.enter.native="handleQuery">
-          placeholder="请选择业务实体"
+          <el-option v-for="item in organizationList" :key="item.id" :value="item" :label="item.organizationName">
-          value-key="id"
-          @change="handleCompanyChange1"
-          clearable
-          @keyup.enter.native="handleQuery"
-        >
-          <el-option
-            v-for="item in organizationList"
-            :key="item.id"
-            :value="item"
-            :label="item.organizationName"
-          >
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="资产名称" prop="assetName">
-        <el-input
+        <el-input v-model="queryParams.assetName" placeholder="请输入资产名称" clearable @keyup.enter.native="handleQuery" />
-          v-model="queryParams.assetName"
-          placeholder="请输入资产名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
       </el-form-item>
       <el-form-item label="报废日期" prop="disposalDate">
-        <el-date-picker
+        <el-date-picker v-model="queryParams.disposalDate" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
-          v-model="queryParams.disposalDate"
+          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-          style="width: 240px"
+          :default-time="['00:00:00', '23:59:59']" />
-          value-format="yyyy-MM-dd HH:mm:ss"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="['00:00:00', '23:59:59']"
-        />
       </el-form-item>
 
       <el-form-item label="购买渠道" prop="purchaseChannel">
-        <el-input
+        <el-input v-model="queryParams.purchaseChannel" placeholder="请输入购买渠道" clearable
-          v-model="queryParams.purchaseChannel"
+          @keyup.enter.native="handleQuery" />
-          placeholder="请输入购买渠道"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
       </el-form-item>
       <el-form-item label="年度" prop="year">
-        <el-input
+        <el-input v-model="queryParams.year" placeholder="请输入年度" clearable @keyup.enter.native="handleQuery" />
-          v-model="queryParams.year"
-          placeholder="请输入年度"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
       </el-form-item>
       <el-form-item label="月份" prop="period">
-        <el-input
+        <el-input v-model="queryParams.period" placeholder="请输入月份" clearable @keyup.enter.native="handleQuery" />
-          v-model="queryParams.period"
-          placeholder="请输入月份"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-          >搜索</el-button
-        >
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -83,15 +37,8 @@
     <!-- 操作工具栏 -->
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-          type="primary"
+          v-hasPermi="['ea:electronic:create']">新增</el-button>
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['ea:electronic:create']"
-          >新增</el-button
-        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -105,21 +52,10 @@
         >
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-          type="warning"
+          v-hasPermi="['ea:electronic:export']">导出</el-button>
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['ea:electronic:export']"
-          >导出</el-button
-        >
       </el-col>
-      <right-toolbar
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        :showSearch.sync="showSearch"
-        @queryTable="getList"
-      ></right-toolbar>
     </el-row>
 
     <!-- 列表 -->
@@ -143,32 +79,19 @@
           <dict-tag :type="DICT_TYPE.ASSET_TYPE" :value="scope.row.assetType" />
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column label="购买日期" align="center" prop="purchaseDate" width="180">
-        label="购买日期"
-        align="center"
-        prop="purchaseDate"
-        width="180"
-      >
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.purchaseDate) }}</span>
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column label="报废日期" align="center" prop="disposalDate" width="180">
-        label="报废日期"
-        align="center"
-        prop="disposalDate"
-        width="180"
-      >
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.disposalDate) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="资产状态" align="center" prop="assetStatus">
         <template v-slot="scope">
-          <dict-tag
+          <dict-tag :type="DICT_TYPE.ASSET_STATUS" :value="scope.row.assetStatus" />
-            :type="DICT_TYPE.ASSET_STATUS"
-            :value="scope.row.assetStatus"
-          />
         </template>
       </el-table-column>
       <el-table-column label="资产价格" align="center" prop="purchasePrice" />
@@ -179,10 +102,7 @@
       <el-table-column label="月份" align="center" prop="period" />
       <el-table-column label="借阅状态" align="center" prop="borrowStatus">
         <template v-slot="scope">
-          <dict-tag
+          <dict-tag :type="DICT_TYPE.BORROW_STATUS" :value="scope.row.borrowStatus" />
-            :type="DICT_TYPE.BORROW_STATUS"
-            :value="scope.row.borrowStatus"
-          />
         </template>
       </el-table-column>
       <el-table-column label="纸档位置" align="center" prop="position" />
@@ -193,103 +113,60 @@
       </el-table-column>
       <el-table-column label="归档状态" align="center" prop="fileStatus">
         <template v-slot="scope">
-          <dict-tag
+          <dict-tag :type="DICT_TYPE.ARCHIVES_FILE_STATUS" :value="scope.row.fileStatus" />
-            :type="DICT_TYPE.ARCHIVES_FILE_STATUS"
-            :value="scope.row.fileStatus"
-          />
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column label="创建日期" align="center" prop="createTime" width="180">
-        label="创建日期"
-        align="center"
-        prop="createTime"
-        width="180"
-      >
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="制单人" align="center" prop="createBy" />
-      <el-table-column
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="180px">
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
-        fixed="right"
-        width="180px"
-      >
         <template v-slot="scope">
           <el-button
             size="mini"
             type="text"
             icon="el-icon-view"
-            @click="handleView(scope.row)"
+            v-if="scope.row.contractAttachment"
-            >查看
+            @click="handleViewFJ(scope.row)"
+            >查看附件
           </el-button>
-          <el-button
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看
-            size="mini"
+          </el-button>
-            type="text"
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-            icon="el-icon-edit"
+            v-hasPermi="['ea:electronic:update']">修改</el-button>
-            @click="handleUpdate(scope.row)"
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-            v-hasPermi="['ea:electronic:update']"
+            v-hasPermi="['ea:electronic:delete']">删除</el-button>
-            >修改</el-button
-          >
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['ea:electronic:delete']"
-            >删除</el-button
-          >
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页组件 -->
-    <pagination
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-      v-show="total > 0"
+      @pagination="getList" />
-      :total="total"
-      :page.sync="queryParams.pageNo"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 对话框(添加 / 修改) -->
-    <el-dialog
+    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
-      :title="title"
+      <el-upload class="upload-demo" drag :limit="1" :action="uploadUrl" :file-list="fileList" :headers="headers"
-      :visible.sync="open"
+          :on-success="handleSuccess" name="multipartFile" :multiple="false" :accept="imgType">
-      width="1000px"
+          <i class="el-icon-upload"></i>
-      append-to-body
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-    >
+        </el-upload>
-      <el-form ref="form" :model="form" :rules="rules" label-width="98px">
+
+      <el-form ref="form" :model="form" :rules="rules" label-width="98px" style="margin-top: 20px">
         <el-row>
           <el-col :span="8">
             <el-form-item label="业务实体名称" prop="company">
-              <el-select
+              <el-select v-model="form.company" placeholder="请选择业务实体" value-key="id" @change="handleCompanyChange">
-                v-model="form.company"
+                <el-option v-for="item in organizationList" :key="item.id" :value="item" :label="item.organizationName">
-                placeholder="请选择业务实体"
-                value-key="id"
-                @change="handleCompanyChange"
-              >
-                <el-option
-                  v-for="item in organizationList"
-                  :key="item.id"
-                  :value="item"
-                  :label="item.organizationName"
-                >
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="部门名称" prop="deptName">
-              <treeselect
+              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" :clearable="true"
-                v-model="form.deptId"
+                placeholder="请选择归属部门" :normalizer="normalizer" />
-                :options="deptOptions"
-                :show-count="true"
-                :clearable="true"
-                placeholder="请选择归属部门"
-                :normalizer="normalizer"
-              />
             </el-form-item>
           </el-col>
           <el-col :span="8">
@@ -302,83 +179,54 @@
           <el-input v-model="form.assetName" placeholder="请输入资产名称" />
         </el-form-item>
 
+        
+
         <el-row>
           <el-col :span="8">
             <el-form-item label="资产类型" prop="assetType">
               <el-select v-model="form.assetType" placeholder="请选择咨询类型	">
-                <el-option
+                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.ASSET_TYPE)" :key="dict.value" :label="dict.label"
-                  v-for="dict in this.getDictDatas(DICT_TYPE.ASSET_TYPE)"
+                  :value="dict.value" />
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="购买日期" prop="purchaseDate">
-              <el-date-picker
+              <el-date-picker clearable v-model="form.purchaseDate" type="date" value-format="yyyy-MM-dd "
-                clearable
+                placeholder="选择购买日期" />
-                v-model="form.purchaseDate"
-                type="date"
-                value-format="yyyy-MM-dd "
-                placeholder="选择购买日期"
-              />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="报废日期" prop="disposalDate">
-              <el-date-picker
+              <el-date-picker clearable v-model="form.disposalDate" type="date" value-format="yyyy-MM-dd"
-                clearable
+                placeholder="选择报废日期" />
-                v-model="form.disposalDate"
-                type="date"
-                value-format="yyyy-MM-dd"
-                placeholder="选择报废日期"
-              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="8">
             <el-form-item label="资产状态" prop="assetStatus">
-              <el-select
+              <el-select v-model="form.assetStatus" placeholder="请选择资产状态">
-                v-model="form.assetStatus"
+                <el-option v-for="item in typeOptions" :key="item.id" :value="item.value" :label="item.label">
-                placeholder="请选择资产状态"
-              >
-                <el-option
-                  v-for="item in typeOptions"
-                  :key="item.id"
-                  :value="item.value"
-                  :label="item.label"
-                >
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="资产价格" prop="purchasePrice">
-              <el-input
+              <el-input v-model="form.purchasePrice" placeholder="请输入资产价格" />
-                v-model="form.purchasePrice"
-                placeholder="请输入资产价格"
-              />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="资产数量" prop="assetQuantity">
-              <el-input
+              <el-input v-model="form.assetQuantity" placeholder="请输入资产数量" />
-                v-model="form.assetQuantity"
-                placeholder="请输入资产数量"
-              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="8">
             <el-form-item label="购买渠道" prop="purchaseChannel">
-              <el-input
+              <el-input v-model="form.purchaseChannel" placeholder="请输入购买渠道" />
-                v-model="form.purchaseChannel"
-                placeholder="请输入购买渠道"
-              />
             </el-form-item>
           </el-col>
           <el-col :span="8">
@@ -388,13 +236,7 @@
           </el-col>
           <el-col :span="8">
             <el-form-item label="年度" prop="year">
-              <el-date-picker
+              <el-date-picker format="yyyy年" v-model="form.year" value-format="yyyy" type="year" placeholder="请选择会计年份">
-                format="yyyy年"
-                v-model="form.year"
-                value-format="yyyy"
-                type="year"
-                placeholder="请选择会计年份"
-              >
               </el-date-picker>
             </el-form-item>
           </el-col>
@@ -402,27 +244,15 @@
         <el-row>
           <el-col :span="8">
             <el-form-item label="月份" prop="period">
-              <el-date-picker
+              <el-date-picker popper-class="due_month" v-model="form.period" format="M月" value-format="M" type="month"
-                popper-class="due_month"
+                placeholder="请选择会计月份">
-                v-model="form.period"
-                format="M月"
-                value-format="M"
-                type="month"
-                placeholder="请选择会计月份"
-              >
               </el-date-picker>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="纸档位置" prop="position">
-              <el-cascader
+              <el-cascader v-model="siteArray" :options="siteOptions" :props="propName" placeholder="请选择纸档位置" clearable
-                v-model="siteArray"
+                @change="handleSiteChanged" />
-                :options="siteOptions"
-                :props="propName"
-                placeholder="请选择纸档位置"
-                clearable
-                @change="handleSiteChanged"
-              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -438,9 +268,7 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm" v-if="optType != 'view'"
+        <el-button type="primary" @click="submitForm" v-if="optType != 'view'">确 定</el-button>
-          >确 定</el-button
-        >
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -464,6 +292,7 @@ import { listSimpleDepts } from "@/api/system/dept";
 import { listSimplePosts } from "@/api/system/post";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { getAccessToken, getTenantId } from "@/utils/auth";
 
 export default {
   name: "ElectronicAssets",
@@ -478,6 +307,15 @@ export default {
         value: "pId",
         multiple: false,
       },
+      imgType: ".jpeg, .jpg, .png .doc, .xls, .txt, .pdf, .png, .ofd ",
+      uploadUrl:
+        process.env.VUE_APP_BASE_API +
+        "/admin-api/accounting/attachment/upload", // 上传地址地址
+      headers: {
+        Authorization: "Bearer " + getAccessToken(),
+        "tenant-id": getTenantId(),
+      }, // 设置上传的请求头
+      fileList: [], // 文件列表
       // 部门树选项
       deptOptions: undefined,
       // 遮罩层
@@ -505,6 +343,7 @@ export default {
       queryParams: {
         pageNo: 1,
         pageSize: 10,
+        contractAttachment:null,
         companyId: null,
         company: null,
         deptId: null,
@@ -558,6 +397,25 @@ export default {
         this.loading = false;
       });
     },
+    // 上传成功的函数
+    handleSuccess(res) {
+      console.log(res);
+      this.form.contractAttachment = res.data.url;
+    },
+    /**
+    * 文件预览
+    * @param fileUrl
+    */
+    openLink(fileUrl) {
+      const url =
+        process.env.VUE_APP_ONLINE_API +
+        `/onlinePreview?url=${encodeURIComponent(this.base64Encode(fileUrl))}`;
+      window.open(url);
+    },
+    /** 查看附件按钮操作 */
+    handleViewFJ(row) {
+      this.openLink(row.contractAttachment);
+    },
     //获取字典数据
     handleInitList() {
       // 获取凭证类别
@@ -639,6 +497,7 @@ export default {
         deptName: undefined,
         assetCode: undefined,
         assetName: undefined,
+        contractAttachment:undefined,
         assetDescription: undefined,
         assetType: undefined,
         purchaseDate: undefined,
@@ -681,6 +540,7 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
+      this.fileList = [];
       this.open = true;
       this.optType = "add";
       this.title = "添加资产档案";

src/views/ea/electronicConsultation/index.vue

@@ -312,7 +312,13 @@
       v-dialogDrag
       append-to-body
     >
-      <el-form ref="form" :model="form" :rules="rules" label-width="98px">
+    <el-upload class="upload-demo" drag :limit="1" :action="uploadUrl" :file-list="fileList" :headers="headers"
+          :on-success="handleSuccess" name="multipartFile" :multiple="false" :accept="imgType">
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        </el-upload>
+
+      <el-form ref="form" :model="form" :rules="rules" label-width="98px" style="margin-top: 20px">
         <el-row>
           <el-col :span="8">
             <el-form-item label="业务实体	" prop="company">
@@ -515,6 +521,7 @@ import { listSimpleDepts } from "@/api/system/dept";
 import { listSimplePosts } from "@/api/system/post";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { getAccessToken, getTenantId } from "@/utils/auth";
 
 export default {
   name: "ElectronicConsultation",
@@ -530,6 +537,15 @@ export default {
         value: "pId",
         multiple: false,
       },
+      imgType: ".jpeg, .jpg, .png .doc, .xls, .txt, .pdf, .png, .ofd ",
+      uploadUrl:
+        process.env.VUE_APP_BASE_API +
+        "/admin-api/accounting/attachment/upload", // 上传地址地址
+      headers: {
+        Authorization: "Bearer " + getAccessToken(),
+        "tenant-id": getTenantId(),
+      }, // 设置上传的请求头
+      fileList: [], // 文件列表
       // 部门树选项
       deptOptions: undefined,
       // 遮罩层
@@ -561,6 +577,7 @@ export default {
         createTime: [],
         company: null,
         systemDept: null,
+        contractAttachment:null,
         consultationId: null,
         consultationType: null,
         consultationTitle: null,
@@ -602,6 +619,25 @@ export default {
         this.total = response.data.total;
         this.loading = false;
       });
+    },
+     // 上传成功的函数
+     handleSuccess(res) {
+      console.log(res);
+      this.form.contractAttachment = res.data.url;
+    },
+    /**
+    * 文件预览
+    * @param fileUrl
+    */
+    openLink(fileUrl) {
+      const url =
+        process.env.VUE_APP_ONLINE_API +
+        `/onlinePreview?url=${encodeURIComponent(this.base64Encode(fileUrl))}`;
+      window.open(url);
+    },
+    /** 查看附件按钮操作 */
+    handleViewFJ(row) {
+      this.openLink(row.contractAttachment);
     },
     /** 查询部门下拉树结构 + 岗位下拉 */
     getTreeselect() {
@@ -683,6 +719,7 @@ export default {
         systemDept: undefined,
         consultationId: undefined,
         consultationType: undefined,
+        contractAttachment:undefined,
         consultationTitle: undefined,
         consultationContent: undefined,
         consultorName: undefined,
@@ -719,6 +756,7 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
+      this.fileList = [];
       this.open = true;
       this.optType = "add";
       this.title = "添加咨询档案";

src/views/ea/electronicCustomerComplaint/index.vue

@@ -274,6 +274,15 @@
         width="180px"
       >
         <template v-slot="scope">
+         
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            v-if="scope.row.contractAttachment"
+            @click="handleViewFJ(scope.row)"
+            >查看附件
+          </el-button>
           <el-button
             size="mini"
             type="text"
@@ -317,7 +326,12 @@
       v-dialogDrag
       append-to-body
     >
-      <el-form ref="form" :model="form" :rules="rules" label-width="98px">
+    <el-upload class="upload-demo" drag :limit="1" :action="uploadUrl" :file-list="fileList" :headers="headers"
+          :on-success="handleSuccess" name="multipartFile" :multiple="false" :accept="imgType">
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        </el-upload>
+      <el-form ref="form" :model="form" :rules="rules" label-width="98px" style="margin-top: 20px">
         <el-row>
           <!-- <el-col :span="8">
             <el-form-item label=" 制单人" prop="createBy">
@@ -536,6 +550,7 @@ import { listSimpleDepts } from "@/api/system/dept";
 import { listSimplePosts } from "@/api/system/post";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { getAccessToken, getTenantId } from "@/utils/auth";
 
 export default {
   name: "ElectronicCustomerComplaint",
@@ -550,6 +565,15 @@ export default {
         value: "pId",
         multiple: false,
       },
+      imgType: ".jpeg, .jpg, .png .doc, .xls, .txt, .pdf, .png, .ofd ",
+      uploadUrl:
+        process.env.VUE_APP_BASE_API +
+        "/admin-api/accounting/attachment/upload", // 上传地址地址
+      headers: {
+        Authorization: "Bearer " + getAccessToken(),
+        "tenant-id": getTenantId(),
+      }, // 设置上传的请求头
+      fileList: [], // 文件列表
       // 部门树选项
       deptOptions: undefined,
       // 非单个禁用
@@ -582,6 +606,7 @@ export default {
         company: null,
         deptName: null,
         complaintCode: null,
+        contractAttachment:null,
         customerName: null,
         customerPhone: null,
         complaintTime: [],
@@ -625,6 +650,25 @@ export default {
         this.total = response.data.total;
         this.loading = false;
       });
+    },
+     // 上传成功的函数
+     handleSuccess(res) {
+      console.log(res);
+      this.form.contractAttachment = res.data.url;
+    },
+    /**
+    * 文件预览
+    * @param fileUrl
+    */
+    openLink(fileUrl) {
+      const url =
+        process.env.VUE_APP_ONLINE_API +
+        `/onlinePreview?url=${encodeURIComponent(this.base64Encode(fileUrl))}`;
+      window.open(url);
+    },
+    /** 查看附件按钮操作 */
+    handleViewFJ(row) {
+      this.openLink(row.contractAttachment);
     },
     /** 查询部门下拉树结构 + 岗位下拉 */
     getTreeselect() {
@@ -710,6 +754,7 @@ export default {
         createBy: undefined,
         company: undefined,
         deptName: undefined,
+        contractAttachment:undefined,
         complaintCode: undefined,
         customerName: undefined,
         customerPhone: undefined,
@@ -748,6 +793,7 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
+      this.fileList = [];
       this.open = true;
       this.optType = "add";
       this.title = "添加客诉档案";

src/views/ea/electronicEmployee/index.vue

@@ -201,6 +201,14 @@
         width="180px"
       >
         <template v-slot="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            v-if="scope.row.contractAttachment"
+            @click="handleViewFJ(scope.row)"
+            >查看附件
+          </el-button>
           <el-button
             size="mini"
             type="text"
@@ -244,7 +252,12 @@
       v-dialogDrag
       append-to-body
     >
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-upload class="upload-demo" drag :limit="1" :action="uploadUrl" :file-list="fileList" :headers="headers"
+          :on-success="handleSuccess" name="multipartFile" :multiple="false" :accept="imgType">
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        </el-upload>
+      <el-form ref="form" :model="form" :rules="rules" label-width="98px"  style="margin-top: 20px">
         <el-row>
           <el-col :span="8">
             <el-form-item label="业务实体" prop="company">
@@ -621,6 +634,7 @@ import { listSimpleDepts } from "@/api/system/dept";
 import { listSimplePosts } from "@/api/system/post";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { getAccessToken, getTenantId } from "@/utils/auth";
 
 export default {
   name: "ElectronicEmployee",
@@ -635,6 +649,15 @@ export default {
         value: "pId",
         multiple: false,
       },
+      imgType: ".jpeg, .jpg, .png .doc, .xls, .txt, .pdf, .png, .ofd ",
+      uploadUrl:
+        process.env.VUE_APP_BASE_API +
+        "/admin-api/accounting/attachment/upload", // 上传地址地址
+      headers: {
+        Authorization: "Bearer " + getAccessToken(),
+        "tenant-id": getTenantId(),
+      }, // 设置上传的请求头
+      fileList: [], // 文件列表
       // 部门树选项
       deptOptions: undefined,
       // 非单个禁用
@@ -664,6 +687,7 @@ export default {
         pageSize: 10,
         createBy: null,
         createTime: [],
+        contractAttachment:null,
         company: null,
         deptName: null,
         name: null,
@@ -708,6 +732,25 @@ export default {
         this.total = response.data.total;
         this.loading = false;
       });
+    },
+         // 上传成功的函数
+         handleSuccess(res) {
+      console.log(res);
+      this.form.contractAttachment = res.data.url;
+    },
+    /**
+    * 文件预览
+    * @param fileUrl
+    */
+    openLink(fileUrl) {
+      const url =
+        process.env.VUE_APP_ONLINE_API +
+        `/onlinePreview?url=${encodeURIComponent(this.base64Encode(fileUrl))}`;
+      window.open(url);
+    },
+    /** 查看附件按钮操作 */
+    handleViewFJ(row) {
+      this.openLink(row.contractAttachment);
     },
     /** 查询部门下拉树结构 + 岗位下拉 */
     getTreeselect() {
@@ -777,6 +820,7 @@ export default {
         deptName: undefined,
         name: undefined,
         gender: undefined,
+        contractAttachment:undefined,
         birthdate: undefined,
         nationality: undefined,
         address: undefined,