法律法规添加附件上传

src/components/FileUpload/index.vue

 <template>
   <div class="upload-file">
-    <el-upload
-      multiple
-      :action="uploadFileUrl"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      :on-success="handleUploadSuccess"
-      :show-file-list="false"
-      :headers="headers"
-      class="upload-file-uploader"
-      ref="fileUpload"
-    >
+    <el-upload multiple :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="limit"
+      :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="false"
+      :headers="headers" class="upload-file-uploader" ref="fileUpload">
       <!-- 上传按钮 -->
       <el-button size="mini" type="primary">选取文件</el-button>
       <!-- 上传提示 -->
@@ -60,7 +49,7 @@ export default {
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {
       type: Array,
-      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+      default: () => ["doc", "xls", "ppt", "txt", "pdf", "docx"],
     },
     // 是否显示提示
     isShowTip: {
@@ -197,19 +186,40 @@ export default {
 .upload-file-uploader {
   margin-bottom: 5px;
 }
+
 .upload-file-list .el-upload-list__item {
   border: 1px solid #e4e7ed;
   line-height: 2;
   margin-bottom: 10px;
   position: relative;
 }
+
 .upload-file-list .ele-upload-list__item-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: inherit;
 }
+
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }
+
+.el-link--default {
+  flex: 1;
+  overflow: hidden;
+  justify-content: start;
+
+  ::v-deep .el-link--inner {
+    width: 100%;
+  }
+
+  ::v-deep .el-icon-document {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 98%;
+    vertical-align: middle;
+  }
+}
 </style>

src/views/law/law/index.vue

@@ -4,22 +4,14 @@
       <el-form-item label="标题" prop="name">
         <el-input v-model="queryParams.name" placeholder="请输入标题" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item label="简述" prop="sketch">
+      <el-form-item label="制定机关" prop="sketch">
         <el-input v-model="queryParams.sketch" placeholder="请输入简述" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item label="范围" prop="range">
-        <el-input v-model="queryParams.rangeInfo" placeholder="请输入范围" clearable @keyup.enter.native="handleQuery" />
-      </el-form-item>
       <el-form-item label="颁布日期" prop="issueDate">
         <el-date-picker clearable v-model="queryParams.issueDate" type="date" value-format="yyyy-MM-dd"
           placeholder="请选择颁布日期">
         </el-date-picker>
       </el-form-item>
-      <el-form-item label="实施日期" prop="implementationDate">
-        <el-date-picker clearable v-model="queryParams.implementationDate" type="date" value-format="yyyy-MM-dd"
-          placeholder="请选择实施日期">
-        </el-date-picker>
-      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -51,10 +43,13 @@
       <el-table-column label="序号" width="55" align="center" prop="id" />
       <el-table-column label="名称" align="center" prop="name">
         <template slot-scope="scope">
-          <router-link class="link-type" :to="'/dev-api' + scope.row.lawFiles">{{ scope.row.name
+          <router-link class="link-type" target="_blank" :to="'/dev-api' + scope.row.lawFiles">{{ scope.row.name
             }}</router-link>
         </template>
       </el-table-column>
+      <el-table-column label="制定机关" align="center" prop="sketch"></el-table-column>
+      <el-table-column label="法律性质" align="center" prop="type"></el-table-column>
+      <el-table-column label="公布日期" align="center" prop="issueDate"></el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
@@ -71,8 +66,19 @@
     <!-- 添加或修改法律法规库对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item required label="名称" prop="name" :rules="[{ required: true, message: '请输入名称' }]">
-          <el-input v-model="form.name" placeholder="请输入名称" />
+        <el-form-item required label="标题" prop="name" :rules="[{ required: true, message: '请输入标题' }]">
+          <el-input v-model="form.name" placeholder="请输入标题" />
+        </el-form-item>
+        <el-form-item label="制定机关" prop="sketch">
+          <el-input v-model="form.sketch" placeholder="请输入制定机关" />
+        </el-form-item>
+        <el-form-item label="法律性质" prop="type">
+          <el-input v-model="form.type" placeholder="请输入法律性质" />
+        </el-form-item>
+        <el-form-item label="公布日期" prop="issueDate">
+          <!-- <el-input v-model="form.issueDate" placeholder="请输入公布日期" /> -->
+          <el-date-picker clearable v-model="form.issueDate" type="date" value-format="yyyy-MM-dd"
+            placeholder="请选择颁布日期" />
         </el-form-item>
         <el-form-item required :rules="[{ required: true, message: '请选择文件' }]" label="文件" prop="lawFiles">
           <file-upload v-model="form.lawFiles" :limit="1" />