|
|
@@ -58,14 +58,14 @@
|
|
|
<el-table-column label="操作" width="180" fixed="right">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button
|
|
|
- type="primary"
|
|
|
+ type="text"
|
|
|
size="small"
|
|
|
@click="handleEditExtract(scope.row)"
|
|
|
>
|
|
|
修改
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
- type="danger"
|
|
|
+ type="text"
|
|
|
size="small"
|
|
|
@click="handleDeleteExtract(scope.row)"
|
|
|
>
|
|
|
@@ -77,79 +77,94 @@
|
|
|
<el-dialog
|
|
|
:visible.sync="dialogVisible"
|
|
|
:title="dialogTitle"
|
|
|
- width="500px"
|
|
|
+ width="600px"
|
|
|
:close-on-click-modal="false"
|
|
|
:modal="false"
|
|
|
append-to-body
|
|
|
+ custom-class="extract-material-dialog"
|
|
|
>
|
|
|
- <el-form
|
|
|
- ref="extractForm"
|
|
|
- :model="extractForm"
|
|
|
- :rules="rules"
|
|
|
- label-width="100px"
|
|
|
- >
|
|
|
- <el-form-item label="材料名称" prop="materialName">
|
|
|
- <el-input
|
|
|
- v-model="extractForm.materialName"
|
|
|
- placeholder="请输入材料名称"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="页数" prop="pageCount">
|
|
|
- <el-input-number
|
|
|
- v-model.number="extractForm.pageCount"
|
|
|
- placeholder="请输入页数"
|
|
|
- :min="1"
|
|
|
- :step="1"
|
|
|
- ></el-input-number>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="序号" prop="orderNum">
|
|
|
- <el-input-number
|
|
|
- v-model.number="extractForm.orderNum"
|
|
|
- placeholder="请输入序号"
|
|
|
- :min="1"
|
|
|
- :step="1"
|
|
|
- ></el-input-number>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="上传附件" prop="fileList">
|
|
|
- <el-upload
|
|
|
- class="upload-demo"
|
|
|
- :action="''"
|
|
|
- :http-request="handleFileUpload"
|
|
|
- :on-remove="handleFileRemove"
|
|
|
- :before-upload="beforeFileUpload"
|
|
|
- :on-success="handleFileUploadSuccess"
|
|
|
- :on-error="handleFileUploadError"
|
|
|
- :on-progress="handleFileUploadProgress"
|
|
|
- :file-list="extractForm.fileList"
|
|
|
- :limit="1"
|
|
|
- :on-exceed="handleFileExceed"
|
|
|
+ <div class="dialog-content">
|
|
|
+ <el-form
|
|
|
+ ref="extractForm"
|
|
|
+ :model="extractForm"
|
|
|
+ :rules="rules"
|
|
|
+ class="extract-form"
|
|
|
+ label-width="0"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ prop="materialName"
|
|
|
+ label="资料名称:"
|
|
|
+ class="custom-form-item"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="extractForm.materialName"
|
|
|
+ placeholder="请输入材料名称"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="pageCount" label="页数:" class="custom-form-item">
|
|
|
+ <el-input-number
|
|
|
+ v-model.number="extractForm.pageCount"
|
|
|
+ placeholder="请输入页数"
|
|
|
+ :min="1"
|
|
|
+ :step="1"
|
|
|
+ ></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="orderNum" label="序号:" class="custom-form-item">
|
|
|
+ <el-input-number
|
|
|
+ v-model.number="extractForm.orderNum"
|
|
|
+ placeholder="请输入序号"
|
|
|
+ :min="1"
|
|
|
+ :step="1"
|
|
|
+ ></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="remark" label="备注:" class="custom-form-item">
|
|
|
+ <el-input
|
|
|
+ v-model="extractForm.remark"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入备注"
|
|
|
+ :rows="4"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ prop="fileList"
|
|
|
+ label="上传扫描件:"
|
|
|
+ class="custom-form-item"
|
|
|
>
|
|
|
- <el-button
|
|
|
- v-show="
|
|
|
- !extractForm.fileList || extractForm.fileList.length === 0
|
|
|
- "
|
|
|
- size="small"
|
|
|
- type="primary"
|
|
|
- >
|
|
|
- 选择文件
|
|
|
- </el-button>
|
|
|
- <div slot="tip" class="el-upload__tip">
|
|
|
- 支持 pdf, doc, docx, xls, xlsx, csv 格式,单个文件不超过50MB
|
|
|
+ <div class="upload-wrapper">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ :action="''"
|
|
|
+ :http-request="handleFileUpload"
|
|
|
+ :on-remove="handleFileRemove"
|
|
|
+ :before-upload="beforeFileUpload"
|
|
|
+ :on-success="handleFileUploadSuccess"
|
|
|
+ :on-error="handleFileUploadError"
|
|
|
+ :on-progress="handleFileUploadProgress"
|
|
|
+ :file-list="extractForm.fileList"
|
|
|
+ :limit="1"
|
|
|
+ :on-exceed="handleFileExceed"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-show="
|
|
|
+ !extractForm.fileList || extractForm.fileList.length === 0
|
|
|
+ "
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ class="upload-btn"
|
|
|
+ >
|
|
|
+ 选择文件
|
|
|
+ </el-button>
|
|
|
+ <div class="upload-tip">
|
|
|
+ 多张扫描图片请插入一个word文档中上传
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
</div>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="备注" prop="remark">
|
|
|
- <el-input
|
|
|
- v-model="extractForm.remark"
|
|
|
- type="textarea"
|
|
|
- placeholder="请输入备注"
|
|
|
- :rows="4"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div class="dialog-footer">
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
|
- <el-button type="primary" @click="handleSubmit">确定</el-button>
|
|
|
+ <el-button type="primary" @click="handleSubmit">保存</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
@@ -652,17 +667,13 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .extract-material-container {
|
|
|
+ /* .extract-material-container {
|
|
|
padding: 20px;
|
|
|
- }
|
|
|
+ } */
|
|
|
|
|
|
.extract-controls {
|
|
|
margin-bottom: 20px;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
-
|
|
|
- .dialog-footer {
|
|
|
- text-align: center;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
|
|
|
/* 操作按钮样式优化 */
|
|
|
@@ -675,3 +686,73 @@
|
|
|
background-color: #f5f7fa;
|
|
|
}
|
|
|
</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+ /* 弹窗样式 */
|
|
|
+ .extract-material-dialog .dialog-content {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .extract-material-dialog .extract-form {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .extract-material-dialog .custom-form-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .extract-material-dialog .custom-form-item .el-form-item__label {
|
|
|
+ width: 100px !important;
|
|
|
+ text-align: center !important;
|
|
|
+ /* color: #409eff !important; */
|
|
|
+ font-size: 14px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding: 0 !important;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .extract-material-dialog .custom-form-item .el-form-item__content {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .extract-material-dialog .custom-form-item .el-input,
|
|
|
+ .extract-material-dialog .custom-form-item .el-textarea,
|
|
|
+ .extract-material-dialog .custom-form-item .el-input-number {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .extract-material-dialog .upload-wrapper {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .extract-material-dialog .upload-tip {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ line-height: 1.5;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .extract-material-dialog .upload-btn {
|
|
|
+ align-self: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .extract-material-dialog .el-upload {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .extract-material-dialog .dialog-footer {
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .extract-material-dialog .dialog-footer .el-button {
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+</style>
|