附件上传/图片预览

src/components/FileUpload/index.vue

@@ -60,7 +60,7 @@ export default {
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {
       type: Array,
-      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+      default: () => ["doc", "xls", "ppt", "txt", "pdf",'png', 'jpg', 'jpeg', 'ofd'],
     },
     // 是否显示提示
     isShowTip: {

src/utils/dict.js

@@ -131,8 +131,16 @@ export const DICT_TYPE = {
   ACCOUNTING_INVOICES_STATUS: 'accounting_invoices_status',
   //  发票进销项
   ACCOUNTING_INVOICES_TYPE: 'accounting_invoices_type',
-   // 会计其他资料
+  //合同类型
-   ACCOUNTING_OTHER_TYPE: 'accounting_other_type',
+  CONTRACT_TYPE: 'contract_type',
+  //合同状态
+  CONTRACT_STATUS: 'contract_status',
+  //处理结果
+  HANDLE_RESULT: 'handle_result',
+  //借阅状态
+  BORROW_STATUS: 'borrow_status',
+  //
+
 }
 
 /**

src/views/ea/electronicContracts/index.vue

@@ -2,83 +2,109 @@
   <div class="app-container">
 
     <!-- 搜索工作栏 -->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
       <el-form-item label="制单人" prop="createBy">
-        <el-input v-model="queryParams.createBy" placeholder="请输入制单人" clearable @keyup.enter.native="handleQuery"/>
+        <el-input v-model="queryParams.createBy" placeholder="请输入制单人" clearable
-      </el-form-item>
+                  @keyup.enter.native="handleQuery"/>
-      <el-form-item label="创建日期" prop="createTime">
-        <el-date-picker v-model="queryParams.createTime" style="width: 240px" 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="company">
-        <el-input v-model="queryParams.company" placeholder="请输入业务实体" clearable @keyup.enter.native="handleQuery"/>
+        <el-input v-model="queryParams.company" placeholder="请输入业务实体" clearable
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="创建日期" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" 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="deptName">
-        <el-input v-model="queryParams.deptName" placeholder="请输入所属部门" clearable @keyup.enter.native="handleQuery"/>
+        <el-input v-model="queryParams.deptName" placeholder="请输入所属部门" clearable
+                  @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="合同编号" prop="contractCode">
-        <el-input v-model="queryParams.contractCode" placeholder="请输入合同编号" clearable @keyup.enter.native="handleQuery"/>
+        <el-input v-model="queryParams.contractCode" placeholder="请输入合同编号" clearable
+                  @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="合同名称" prop="contractTitle">
-        <el-input v-model="queryParams.contractTitle" placeholder="请输入合同名称" clearable @keyup.enter.native="handleQuery"/>
+        <el-input v-model="queryParams.contractTitle" placeholder="请输入合同名称" clearable
+                  @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="合同类型" prop="contractType">
         <el-select v-model="queryParams.contractType" placeholder="请选择合同类型" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.CONTRACT_TYPE)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
         </el-select>
       </el-form-item>
       <el-form-item label="签署方" prop="signatory">
-        <el-input v-model="queryParams.signatory" placeholder="请输入签署方" clearable @keyup.enter.native="handleQuery"/>
+        <el-input v-model="queryParams.signatory" placeholder="请输入签署方" clearable
+                  @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="签署日期" prop="signDate">
-        <el-date-picker v-model="queryParams.signDate" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+        <el-date-picker v-model="queryParams.signDate" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
-                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+                        type="daterange"
-      </el-form-item>
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-      <el-form-item label="生效日期" prop="effectiveDate">
+                        :default-time="['00:00:00', '23:59:59']"/>
-        <el-date-picker v-model="queryParams.effectiveDate" style="width: 240px" 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="expiryDate">
+      <el-form-item label="合同状态" prop="contractStatus">
-        <el-date-picker v-model="queryParams.expiryDate" style="width: 240px" 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="contractStatus">
         <el-select v-model="queryParams.contractStatus" placeholder="请选择状态" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.CONTRACT_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
         </el-select>
       </el-form-item>
-      <el-form-item label="金额" prop="contractAmount">
-        <el-input v-model="queryParams.contractAmount" placeholder="请输入金额" clearable @keyup.enter.native="handleQuery"/>
-      </el-form-item>
       <el-form-item label="处理结果" prop="handleResult">
         <el-select v-model="queryParams.handleResult" placeholder="请选择处理结果" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.HANDLE_RESULT)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
         </el-select>
       </el-form-item>
       <el-form-item label="年度" prop="year">
-        <el-date-picker clearable v-model="queryParams.year" type="date" value-format="yyyy-MM-dd" placeholder="选择年度" />
+        <el-date-picker
+          popper-class="due_month"
+          v-model="queryParams.year"
+          format="M月"
+          value-format="M"
+          type="month"
+          placeholder="请选择会计月份"
+          @keyup.enter.native="handleQuery"
+        >
+        </el-date-picker>
       </el-form-item>
       <el-form-item label="月份" prop="period">
-        <el-date-picker clearable v-model="queryParams.period" type="date" value-format="yyyy-MM-dd" placeholder="选择月份" />
+        <el-date-picker
+          popper-class="due_month"
+          v-model="queryParams.period"
+          format="M月"
+          value-format="M"
+          type="month"
+          placeholder="请选择会计月份"
+          @keyup.enter.native="handleQuery"
+        >
+        </el-date-picker>
       </el-form-item>
       <el-form-item label="借阅状态" prop="borrowStatus">
         <el-select v-model="queryParams.borrowStatus" placeholder="请选择借阅状态" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.BORROW_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
         </el-select>
       </el-form-item>
       <el-form-item label="归档时间" prop="recordTime">
-        <el-date-picker v-model="queryParams.recordTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+        <el-date-picker v-model="queryParams.recordTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
-                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+                        type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
+                        :default-time="['00:00:00', '23:59:59']"/>
       </el-form-item>
       <el-form-item label="纸档位置" prop="position">
-        <el-input v-model="queryParams.position" placeholder="请输入纸档位置" clearable @keyup.enter.native="handleQuery"/>
+        <el-input v-model="queryParams.position" placeholder="请输入纸档位置" clearable
+                  @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="完整性" prop="cherks">
         <el-input v-model="queryParams.cherks" placeholder="请输入完整性" clearable @keyup.enter.native="handleQuery"/>
       </el-form-item>
+
       <el-form-item label="归档状态" prop="fileStatus">
         <el-select v-model="queryParams.fileStatus" placeholder="请选择归档状态" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.ARCHIVES_FILE_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -91,134 +117,304 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                   v-hasPermi="['ea:electronic-contracts:create']">新增</el-button>
+                   v-hasPermi="['ea:electronic-contracts:create']">新增
+        </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-                   v-hasPermi="['ea:electronic-contracts:export']">导出</el-button>
+                   :loading="exportLoading"
+                   v-hasPermi="['ea:electronic-contracts:export']">导出
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="主键" align="center" prop="id" />
+
-      <el-table-column label="制单人" align="center" prop="createBy" />
+      <el-table-column label="制单人" align="center" prop="createBy"/>
       <el-table-column 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="company" />
+
-      <el-table-column label="所属部门" align="center" prop="deptName" />
+      <el-table-column label="业务实体" align="center" prop="company"/>
-      <el-table-column label="合同编号" align="center" prop="contractCode" />
+
-      <el-table-column label="合同名称" align="center" prop="contractTitle" />
+      <el-table-column label="所属部门" align="center" prop="deptName"/>
-      <el-table-column label="合同类型" align="center" prop="contractType" />
+      <el-table-column label="合同编号" align="center" prop="contractCode"/>
-      <el-table-column label="签署方" align="center" prop="signatory" />
+      <el-table-column label="合同名称" align="center" prop="contractTitle"/>
-      <el-table-column label="签署日期" align="center" prop="signDate" />
+      <el-table-column label="合同类型" align="center" prop="contractType"/>
-      <el-table-column label="生效日期" align="center" prop="effectiveDate" />
+      <el-table-column label="签署方" align="center" prop="signatory"/>
-      <el-table-column label="截止日期" align="center" prop="expiryDate" />
+      <el-table-column label="签署日期" align="center" prop="signDate" width="98px">
-      <el-table-column label="状态" align="center" prop="contractStatus" />
+        <template v-slot="scope">
-      <el-table-column label="金额" align="center" prop="contractAmount" />
+<!--          <span>{{ parseTime(scope.row.signDate) }}</span>-->
-      <el-table-column label="附件" align="center" prop="contractAttachment" />
+          <span>{{dateArray(scope.row.signDate) }}</span>
-      <el-table-column label="处理结果" align="center" prop="handleResult" />
+<!--          <span>{{  dateArrayTransfer(scope.row.signDate,'yyyy-MM-dd ') }}</span>-->
-      <el-table-column label="年度" align="center" prop="year" />
+        </template>
-      <el-table-column label="月份" align="center" prop="period" />
+      </el-table-column>
-      <el-table-column label="借阅状态" align="center" prop="borrowStatus" />
+      <el-table-column label="生效日期" align="center" prop="effectiveDate" width="98px">
-      <el-table-column label="归档时间" align="center" prop="recordTime" />
+        <template v-slot="scope">
-      <el-table-column label="纸档位置" align="center" prop="position" />
+<!--          <span>{{ parseTime(scope.row.effectiveDate) }}</span>-->
-      <el-table-column label="完整性" align="center" prop="cherks" />
+          <span>{{dateArray(scope.row.effectiveDate) }}</span>
-      <el-table-column label="归档状态" align="center" prop="fileStatus" />
+
+        </template>
+      </el-table-column>
+      <el-table-column label="截止日期" align="center" prop="expiryDate" width="98px" >
+        <template v-slot="scope">
+<!--          <span>{{ parseTime(scope.row.expiryDate) }}</span>-->
+          <span>{{dateArray(scope.row.expiryDate) }}</span>
+
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="contractStatus"/>
+      <el-table-column label="金额" align="center" prop="contractAmount"/>
+      <el-table-column label="查看附件" align="center" prop="contractAttachment" width="180">
+        <template slot-scope="scope">
+          <el-button type="text" @click="openLink(scope.row.contractAttachment)">
+            {{ scope.row.contractAttachment }}
+          </el-button>
+        </template>
+        <!--        <template v-slot="scope">-->
+        <!--          <image-preview v-if="isImg(scope.row.contractAttachment)" :src="scope.row.contractAttachment"-->
+        <!--                         :width="'100px'"></image-preview>-->
+        <!--          <video v-else-if="isVideo(scope.row.contractAttachment)" :width="'100px'" type="video/mp4" poster="false.png"-->
+        <!--                 autoplay="autoplay" controls="controls" loop="-1">-->
+        <!--            <source :src="scope.row.contractAttachment"/>-->
+        <!--          </video>-->
+        <!--          &lt;!&ndash;          <img :src="scope.row.contractAttachment" alt="" width="60" height="60" class="imgs"/>&ndash;&gt;-->
+
+        <!--          <i v-if="isImg(scope.row.contractAttachment) === false &&isVideo(scope.row.contractAttachment) === false">无法预览，点击-->
+        <!--            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"-->
+        <!--                     :href="getFileUrl +19 + '/get' + cutFile(scope.row.contractAttachment) ">下载-->
+        <!--            </el-link>-->
+        <!--          </i>-->
+        <!--        </template>-->
+      </el-table-column>
+
+      <el-table-column label="处理结果" align="center" prop="handleResult"/>
+      <el-table-column label="年度" align="center" prop="year"/>
+      <el-table-column label="月份" align="center" prop="period"/>
+      <el-table-column label="借阅状态" align="center" prop="borrowStatus"/>
+      <el-table-column label="归档时间" align="center" prop="recordTime" width="98px">
+
+      </el-table-column>
+      <el-table-column label="纸档位置" align="center" prop="position"/>
+      <el-table-column label="完整性" align="center" prop="cherks"/>
+
+      <el-table-column label="归档状态" align="center" prop="fileStatus"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
+
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['ea:electronic-contracts:update']">修改</el-button>
+                     v-hasPermi="['ea:electronic-contracts:update']">修改
+          </el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['ea:electronic-contracts:delete']">删除</el-button>
+                     v-hasPermi="['ea:electronic-contracts:delete']">删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页组件 -->
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                 @pagination="getList"/>
+    <!--预览-->
+    <!--    <el-dialog :title="previewtitle" :visible.sync="preview" width="1000px" v-dialogDrag append-to-body>-->
+    <!--      <el-form ref="form" :model="form" :rules="rules" label-width="98px">-->
+    <!--        <el-form-item label="附件">-->
+    <!--          <fileUpload-->
+    <!--            v-model="form.contractAttachment"/>-->
+    <!--        </el-form-item>-->
+    <!--      </el-form>-->
+    <!--      <el-tabs>-->
+
+    <!--        <el-tab-pane label="附件" name="first" prop="contractAttachment" width="180">-->
+
+    <!--          <el-table v-loading="loading" :data="list">-->
+    <!--            <el-table-column label="附件" align="center" prop="contractAttachment">-->
+
+    <!--              <template v-slot="scope">-->
+
+    <!--                <image-preview v-if="isImg(scope.row.contractAttachment)" :src="scope.row.contractAttachment"-->
+    <!--                               :width="'100px'"></image-preview>-->
+    <!--                <video v-else-if="isVideo(scope.row.contractAttachment)" :width="'100px'" type="video/mp4"-->
+    <!--                       poster="false.png"-->
+    <!--                       autoplay="autoplay" controls="controls" loop="-1">-->
+    <!--                  <source :src="scope.row.contractAttachment"/>-->
+    <!--                </video>-->
+    <!--                <i-->
+    <!--                  v-else-if="isImg(scope.row.contractAttachment) === false &&isVideo(scope.row.contractAttachment) === false">无法预览，点击-->
+    <!--                  <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"-->
+    <!--                           :href="getFileUrl +19 + '/get' + cutFile(scope.row.contractAttachment) ">下载-->
+    <!--                  </el-link>-->
+    <!--                </i>-->
+    <!--              </template>-->
+    <!--            </el-table-column>-->
+    <!--          </el-table>-->
+
+
+    <!--        </el-tab-pane>-->
+    <!--      </el-tabs>-->
+    <!--    </el-dialog>-->
 
     <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="1000px" v-dialogDrag append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="98px">
+        <el-row>
+          <el-col :span="8">
             <el-form-item label="制单人" prop="createBy">
-          <el-input v-model="form.createBy" placeholder="请输入制单人" />
+              <el-input v-model="form.createBy" placeholder="请输入制单人"/>
             </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
             <el-form-item label="业务实体" prop="company">
-          <el-input v-model="form.company" placeholder="请输入业务实体" />
+              <el-input v-model="form.company" placeholder="请输入业务实体"/>
             </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
             <el-form-item label="所属部门" prop="deptName">
-          <el-input v-model="form.deptName" placeholder="请输入所属部门" />
+              <el-input v-model="form.deptName" placeholder="请输入所属部门"/>
             </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
             <el-form-item label="合同编号" prop="contractCode">
-          <el-input v-model="form.contractCode" placeholder="请输入合同编号" />
+              <el-input v-model="form.contractCode" placeholder="请输入合同编号"/>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="合同名称" prop="contractTitle">
-          <el-input v-model="form.contractTitle" placeholder="请输入合同名称" />
+              <el-input v-model="form.contractTitle" placeholder="请输入合同名称"/>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="合同类型" prop="contractType">
               <el-select v-model="form.contractType" placeholder="请选择合同类型">
-            <el-option label="请选择字典生成" value="" />
+                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.CONTRACT_TYPE)"
+                           :key="dict.value" :label="dict.label" :value="dict.value"/>
               </el-select>
             </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
             <el-form-item label="签署方" prop="signatory">
-          <el-input v-model="form.signatory" placeholder="请输入签署方" />
+              <el-input v-model="form.signatory" placeholder="请输入签署方"/>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="签署日期" prop="signDate">
-          <el-date-picker clearable v-model="form.signDate" type="date" value-format="timestamp" placeholder="选择签署日期" />
+              <el-date-picker clearable v-model="form.signDate" type="date" value-format="yyyy-MM-dd"
+                              placeholder="选择签署日期"/>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="生效日期" prop="effectiveDate">
-          <el-date-picker clearable v-model="form.effectiveDate" type="date" value-format="timestamp" placeholder="选择生效日期" />
+              <el-date-picker clearable v-model="form.effectiveDate" 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="expiryDate">
-          <el-date-picker clearable v-model="form.expiryDate" type="date" value-format="timestamp" placeholder="选择截止日期" />
+              <el-date-picker clearable v-model="form.expiryDate" type="date" value-format="yyyy-MM-dd"
+                              placeholder="选择截止日期"/>
             </el-form-item>
-        <el-form-item label="状态" prop="contractStatus">
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="合同状态" prop="contractStatus">
               <el-select v-model="form.contractStatus" placeholder="请选择状态">
-            <el-option label="请选择字典生成" value="" />
+                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.CONTRACT_STATUS)"
+                           :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="contractAmount">
-          <el-input v-model="form.contractAmount" placeholder="请输入金额" />
+              <el-input v-model="form.contractAmount" placeholder="请输入金额"/>
             </el-form-item>
+          </el-col>
+        </el-row>
         <el-form-item label="附件">
-          <fileUpload v-model="form.contractAttachment"/>
+          <fileUpload
+            v-model="form.contractAttachment"/>
         </el-form-item>
+        <el-row>
+          <el-col :span="8">
             <el-form-item label="处理结果" prop="handleResult">
               <el-select v-model="form.handleResult" placeholder="请选择处理结果">
-            <el-option label="请选择字典生成" value="" />
+                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.HANDLE_RESULT)"
+                           :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="year">
-          <el-date-picker clearable v-model="form.year" type="date" value-format="timestamp" placeholder="选择年度" />
+              <el-date-picker
+                format="yyyy年"
+                v-model="form.year"
+                value-format="yyyy"
+                type="year"
+                placeholder="请选择会计年份"
+              >
+              </el-date-picker>
+              <!--          <el-date-picker clearable v-model="form.year" type="date" value-format="timestamp" placeholder="选择年度"/>-->
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="月份" prop="period">
-          <el-date-picker clearable v-model="form.period" type="date" value-format="timestamp" placeholder="选择月份" />
+              <el-date-picker
+                popper-class="due_month"
+                v-model="form.period"
+                format="M月"
+                value-format="M"
+                type="month"
+                placeholder="请选择会计月份"
+              >
+              </el-date-picker>
+              <!--          <el-date-picker clearable v-model="form.period" type="date" value-format="timestamp" placeholder="选择月份"/>-->
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="借阅状态" prop="borrowStatus">
               <el-select v-model="form.borrowStatus" placeholder="请选择借阅状态">
-            <el-option label="请选择字典生成" value="" />
+                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.BORROW_STATUS)"
+                           :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="recordTime">
-          <el-date-picker clearable v-model="form.recordTime" type="date" value-format="timestamp" placeholder="选择归档时间" />
+              <el-date-picker clearable v-model="form.recordTime" type="date" value-format="yyyy-MM-dd"
+                              placeholder="选择归档时间"/>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="纸档位置" prop="position">
-          <el-input v-model="form.position" placeholder="请输入纸档位置" />
+              <el-input v-model="form.position" placeholder="请输入纸档位置"/>
             </el-form-item>
+          </el-col>
+          <el-col :span="8">
             <el-form-item label="完整性" prop="cherks">
-          <el-input v-model="form.cherks" placeholder="请输入完整性" />
+              <el-input v-model="form.cherks" placeholder="请输入完整性"/>
             </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
             <el-form-item label="归档状态" prop="fileStatus">
               <el-select v-model="form.fileStatus" placeholder="请选择归档状态">
-            <el-option label="请选择字典生成" value="" />
+                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.ARCHIVES_FILE_STATUS)"
+                           :key="dict.value" :label="dict.label" :value="dict.value"/>
               </el-select>
             </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
+
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
@@ -228,16 +424,30 @@
 </template>
 
 <script>
-import { createElectronicContracts, updateElectronicContracts, deleteElectronicContracts, getElectronicContracts, getElectronicContractsPage, exportElectronicContractsExcel } from "@/api/ea/electronicContracts/electronicContracts";
+import {
+  createElectronicContracts,
+  updateElectronicContracts,
+  deleteElectronicContracts,
+  getElectronicContracts,
+  getElectronicContractsPage,
+  exportElectronicContractsExcel
+} from "@/api/ea/electronicContracts/electronicContracts";
 import FileUpload from '@/components/FileUpload';
+import ImagePreview from "@/components/ImagePreview";
+import Video from "@/components/VideoUpload"
+import WxVideoPlayer from "@/views/mp/components/wx-video-play/main";
 
 export default {
   name: "ElectronicContracts",
   components: {
+    WxVideoPlayer,
     FileUpload,
+    ImagePreview,
   },
   data() {
     return {
+      getFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/",
+      imgs: null,
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -252,6 +462,10 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      //预览标题
+      previewtitle: "",
+      //是否显示预览
+      preview: false,
       // 查询参数
       queryParams: {
         pageNo: 1,
@@ -274,9 +488,9 @@ export default {
         contractAttachment: null,
         handleResult: null,
         year: null,
-        year: [],
+        // year: [],
         period: null,
-        period: [],
+        // period: [],
         borrowStatus: null,
         recordTime: [],
         position: null,
@@ -288,12 +502,12 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
+      rules: {}
-      }
     };
   },
   created() {
     this.getList();
+    // console.log(imgs)
   },
   methods: {
     /** 查询列表 */
@@ -304,8 +518,53 @@ export default {
         this.list = response.data.list;
         this.total = response.data.total;
         this.loading = false;
+        console.log(this.list)
       });
     },
+    /**
+     * 文件预览
+     * @param fileUrl
+     */
+    openLink(fileUrl) {
+      const url = `http://139.224.253.31:48012/onlinePreview?url=${encodeURIComponent(
+        this.base64Encode(fileUrl)
+      )}`;
+      window.open(url);
+    },
+    isImg(url) {
+      let suffix = url.substring(url.lastIndexOf("."))
+      let typeList = ['.jpg', '.png', '.gif', '.jpeg']
+      for (let type of typeList) {
+
+        if (suffix == type) {
+          return true
+        }
+      }
+      return false;
+    },
+    isVideo(url) {
+      let suffix = url.substring(url.lastIndexOf("."))
+      let typeList = ['.mp3', '.mp4', '.mov', '.avi']
+      for (let type of typeList) {
+        debugger
+        if (suffix == type) {
+          return true
+        }
+      }
+      return false;
+    },
+    cutFile(url) {
+      let path = url.substring(url.lastIndexOf("/"))
+      return path
+    },
+    dateArray(list){
+      if (list == null){
+        return ""
+      }
+      let date = list[0]+"-"+list[1]+"-"+list[2]
+      debugger
+      return date
+    },
     /** 取消按钮 */
     cancel() {
       this.open = false;
@@ -359,6 +618,14 @@ export default {
       this.open = true;
       this.title = "添加合同档案";
     },
+    /* 预览按钮*/
+    handlePreview() {
+      this.preview = true;
+      this.previewtitle = "附件预览"
+
+    },
+
+
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
@@ -386,6 +653,7 @@ export default {
         }
         // 添加的提交
         createElectronicContracts(this.form).then(response => {
+
           this.$modal.msgSuccess("新增成功");
           this.open = false;
           this.getList();
@@ -395,12 +663,13 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const id = row.id;
-      this.$modal.confirm('是否确认删除合同档案编号为"' + id + '"的数据项?').then(function() {
+      this.$modal.confirm('是否确认删除合同档案编号为"' + id + '"的数据项?').then(function () {
         return deleteElectronicContracts(id);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
+      }).catch(() => {
+      });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -414,8 +683,10 @@ export default {
       }).then(response => {
         this.$download.excel(response, '合同档案.xls');
         this.exportLoading = false;
-        }).catch(() => {});
+      }).catch(() => {
-    }
+      });
+    },
+
   }
 };
 </script>