新增审核业务文件组件

src/dashoo.cn/frontend_web/src/components/oilsupplier/auditbuslist.vue

@@ -0,0 +1,492 @@
+<template>
+  <div>
+    <el-table :data="subfileList" border>
+      <el-table-column label="操作" width="70" align="center" fixed>
+        <template slot-scope="scope">
+          <el-button type="text" title="编辑" size="small" icon="el-icon-edit" @click="openDialog(scope.row)"></el-button>
+          <el-button size="small" type="text" style="margin-left:3px" icon="el-icon-delete" title="删除"
+            @click="deletedata(scope.row)"></el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="NeedFileType" label="文件分类" show-overflow-tooltip></el-table-column>
+      <!-- <el-table-column prop="NeedFileCode" label="分类编码" show-overflow-tooltip></el-table-column> -->
+      <el-table-column prop="FileName" label="文件名称" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="EffectDate" label="有效日期" show-overflow-tooltip>
+        <template slot-scope="scope">
+          {{ jstimehandle(scope.row.EffectDate+'') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="OtherRemark" label="其他信息" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="Remark" label="备注信息" show-overflow-tooltip></el-table-column>
+    </el-table>
+
+    <el-dialog :title="Title" :visible.sync="visible" top="5vh">
+      <el-form :model="SubfileForm" label-width="100px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="分类名称" required>
+              <el-select ref="refSupplierCertSub" v-model="SubfileForm.SupplierCertSubId" style="width:100%"
+                placeholder="请选择分类名称" @change="getCode()">
+                <el-option v-for="item in businessList" :label="item.Name" :value="item.Id" :key="item.Id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="文件分类" required>
+              <el-input v-model="SubfileForm.NeedFileType" placeholder="请输文件分类"></el-input>
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="12">
+            <el-form-item label="分类编码" required>
+              <el-input v-model="SubfileForm.NeedFileCode" placeholder="请输入编码"></el-input>
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="12">
+            <el-form-item label="有效日期" required>
+              <el-date-picker style="width: 100%" v-model="SubfileForm.EffectDate" type="date" placeholder="请选择有效日期">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="其他信息">
+              <el-input v-model="SubfileForm.OtherRemark" type="textarea" :rows=3 placeholder="请输入备注信息"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注信息">
+              <el-input v-model="SubfileForm.Remark" type="textarea" :rows=3 placeholder="请输入备注信息"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="文档上传">
+              <el-upload style="margin-top: 10px;" multiple action="" :limit="1" ref="refuploadattach"
+                :http-request="uploadrequest" class="attach-uploader" :show-file-list="true"
+                :before-upload="beforeAvatarUpload">
+                <i class="el-icon-plus attach-uploader-icon"></i>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item class="maintainlog" label="" label-width="120px">
+              <div style="overflow: auto;">
+                <template>
+                  <el-row>
+                    <el-col :span="24" v-for="(v,K) in doclist" :key="v">
+                      <span>
+                        <el-button size="small" type="text" icon="el-icon-delete" title="删除" @click="deletefile(K)">
+                        </el-button>
+                      </span>
+                      <a style="margin-left:10px" @click="clickachment(v.url)">{{ v.name }}</a>
+                    </el-col>
+                  </el-row>
+                </template>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer" style="margin-top:-30px;">
+        <el-button @click="visible = false">取 消</el-button>
+        <el-button type="primary" @click="makesure()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+  import {
+    mapGetters
+  } from 'vuex'
+  import axios from 'axios'
+  import uploadajax from '../../assets/js/uploadajax.js'
+  export default {
+    name: 'SubfileList',
+    props: {
+      SupplierId: {
+        type: String,
+        default: '0'
+      },
+      SupplierCertId: {
+        type: String,
+        default: '0'
+      },
+      SupplierTypeCode: {
+        type: String,
+        default: '0'
+      },
+      businessList: {
+        type: Array,
+        default: []
+      },
+      BusinessForm: {}
+    },
+    created() {},
+    computed: {
+      ...mapGetters({
+        session: 'session'
+      })
+    },
+    data() {
+      return {
+        subfileList: [],
+        techList: [],
+        techTreeList: [],
+        orgtreeprops: {
+          value: 'id',
+          label: 'Name',
+          children: 'children'
+        },
+        selectedorg: [],
+
+        Title: '',
+        SubfileForm: {
+          Id: '',
+          SupplierId: '',
+          SupplierTypeCode: '',
+          SupplierCertSubId: '',
+          CertSubName: '',
+          NeedFileType: '',
+          NeedFileCode: '',
+          FileExt: '',
+          FileSize: '',
+          FileName: '',
+          EffectDate: new Date(),
+          FileUrl: '',
+          OtherRemark: '',
+          Remark: '',
+          IsDelete: 0
+        },
+        visible: false,
+        selfVisible: this.visible, // 避免vue双向绑定警告
+
+        waituploads: [], // 等待上传的附件列表
+        doclist: [],
+      }
+    },
+    methods: {
+      initData() {
+        let _this = this
+        const params = {
+          SupplierId: this.SupplierId,
+          SupplierTypeCode: this.SupplierTypeCode,
+          _currentPage: 1,
+          _size: 1000,
+        }
+        this.$axios.get('supplierfile/filelist', {
+            params
+          })
+          .then(res => {
+            _this.subfileList = res.data.items
+            _this.currentItemCount = res.data.currentItemCount
+          })
+          .catch(err => {
+            // handle error
+            console.error(err)
+          })
+      },
+      getCode() {
+        if (this.businessList && this.businessList.length > 0) {
+          for (var i = 0; i < this.businessList.length; i++) {
+            if (this.SubfileForm.SupplierCertSubId == this.businessList[i].Id) {
+              this.SubfileForm.CertSubName = this.businessList[i].Name
+            }
+          }
+        }
+      },
+      makesure() {
+        if (this.Title == '新增文件') {
+          if (this.$refs.refuploadattach.uploadFiles && this.$refs.refuploadattach.uploadFiles.length > 0) {
+            // 上传附件是否完成判断
+            if (!this.attachissuccess()) {
+              this.$message.error('有附件未成功上传！不能保存数据')
+              return
+            }
+            this.getattachissuccess()
+            this.addSubfile()
+          } else {
+            this.$message({
+              type: 'warning',
+              message: '请上传文件！'
+            })
+          }
+        } else if (this.Title == '编辑文件') {
+          if (this.$refs.refuploadattach.uploadFiles && this.$refs.refuploadattach.uploadFiles.length > 0) {
+            // 上传附件是否完成判断
+            if (!this.attachissuccess()) {
+              this.$message.error('有附件未成功上传！不能保存数据')
+              return
+            }
+            this.getattachissuccess()
+            this.editSubfile()
+          } else {
+            this.editSubfile()
+          }
+        }
+      },
+      addSubfile() {
+        let _this = this
+        _this.SubfileForm.SupplierId = parseInt(_this.SubfileForm.SupplierId)
+        _this.SubfileForm.SupplierCertSubId = parseInt(_this.SubfileForm.SupplierCertSubId)
+        _this.$axios.post('/supplierfile/addsubfile/', _this.SubfileForm)
+          .then(res => {
+            if (res.data.code === 0) {
+              _this.$message({
+                type: 'success',
+                message: res.data.message,
+              })
+              this.visible = false
+              this.initData()
+              this.$refs.refuploadattach = ''
+            } else {
+              _this.$message({
+                type: 'warning',
+                message: res.data.message
+              })
+            }
+          })
+          .catch(err => {
+            console.error(err)
+          })
+      },
+      editSubfile() {
+        let _this = this
+        _this.SubfileForm.SupplierId = parseInt(_this.SubfileForm.SupplierId)
+        _this.SubfileForm.SupplierCertSubId = parseInt(_this.SubfileForm.SupplierCertSubId)
+        _this.$axios.put('/supplierfile/editsubfile/' + _this.SubfileForm.Id, _this.SubfileForm)
+          .then(res => {
+            if (res.data.code === 0) {
+              _this.$message({
+                type: 'success',
+                message: res.data.message,
+              })
+              this.visible = false
+              this.initData()
+              this.$refs.refuploadattach = ''
+            } else {
+              _this.$message({
+                type: 'warning',
+                message: res.data.message
+              })
+            }
+          })
+          .catch(err => {
+            console.error(err)
+          })
+      },
+      deletedata(val) {
+        let _this = this;
+        _this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+          .then(() => {
+            _this.$axios.delete('supplierfile/subfiledelete/' + val.Id, {})
+              .then(function (response) {
+                // response
+                if (response.data.code === 0) {
+                  _this.$message({
+                    type: "success",
+                    message: response.data.message
+                  });
+                  _this.initData();
+                } else {
+                  _this.$message({
+                    type: "warning",
+                    message: response.data.message
+                  });
+                }
+              })
+              .catch(function (error) {
+                console.log(error);
+              });
+          })
+          .catch(() => {});
+      },
+      showDialog() {
+        this.Title = '新增文件'
+        this.SubfileForm.Id = ''
+        this.SubfileForm.SupplierId = this.SupplierId
+        this.SubfileForm.SupplierTypeCode = this.SupplierTypeCode
+        this.SubfileForm.SupplierCertSubId = ''
+        this.SubfileForm.CertSubName = ''
+        this.SubfileForm.NeedFileType = ''
+        this.SubfileForm.NeedFileCode = ''
+        this.SubfileForm.FileExt = ''
+        this.SubfileForm.FileSize = ''
+        this.SubfileForm.FileName = ''
+        this.SubfileForm.EffectDate = new Date()
+        this.SubfileForm.FileUrl = ''
+        this.SubfileForm.OtherRemark = ''
+        this.SubfileForm.Remark = ''
+        this.SubfileForm.IsDelete = 0
+        this.visible = true
+      },
+      openDialog(val) {
+        this.Title = '编辑文件'
+        this.SubfileForm.Id = val.Id
+        this.SubfileForm.SupplierId = val.SupplierId
+        this.SubfileForm.SupplierTypeCode = val.SupplierTypeCode
+        if (val.SupplierCertSubId == 0) {
+          this.SubfileForm.SupplierCertSubId = ''
+        } else {
+          this.SubfileForm.SupplierCertSubId = val.SupplierCertSubId
+        }
+        this.SubfileForm.CertSubName = val.CertSubName
+        this.SubfileForm.NeedFileType = val.NeedFileType
+        this.SubfileForm.NeedFileCode = val.NeedFileCode
+        this.SubfileForm.FileExt = val.FileExt
+        this.SubfileForm.FileSize = val.FileSize
+        this.SubfileForm.FileName = val.FileName
+        this.SubfileForm.EffectDate = new Date(val.EffectDate)
+        this.SubfileForm.FileUrl = val.FileUrl
+        this.SubfileForm.OtherRemark = val.OtherRemark
+        if (val.FileUrl != '') {
+          this.getwendanginfo(val.FileUrl)
+        }
+        this.SubfileForm.Remark = val.Remark
+        this.SubfileForm.IsDelete = val.IsDelete
+        this.visible = true
+      },
+      //文档列表
+      getwendanginfo(iUrl) {
+        let _this = this
+        _this.doclist = []
+        let exArr = iUrl.split('|')
+        let params = {
+          name: exArr[1],
+          url: exArr[0]
+        }
+        _this.doclist.push(params)
+      },
+
+      beforeAvatarUpload(file) {
+        let isLt50m = file.size / 1024 / 1024 / 50 < 1
+        if (!isLt50m) {
+          this.$message.error('上传文件大小不能超过 50MB!')
+          return false
+        }
+        return true
+      },
+      uploadrequest(option) {
+        let _this = this
+        axios.post(process.env.upfilehost, {})
+          .then(function (res) {
+            if (res.data && res.data.fid && res.data.fid !== '') {
+              option.action = `http://${res.data.url}/${res.data.fid}`
+              _this.waituploads.push({
+                uid: option.file.uid,
+                url: res.data.publicUrl,
+                fid: res.data.fid
+              })
+              uploadajax(option)
+            } else {
+              _this.$message({
+                type: 'warning',
+                message: '未上传成功！请刷新界面重新上传！'
+              })
+            }
+          })
+          .catch(function (error) {
+            _this.$message({
+              type: 'warning',
+              message: '未上传成功！请重新上传！'
+            })
+          })
+      },
+      // 判断附件是否上传成功
+      attachissuccess() {
+        if (this.$refs.refuploadattach.uploadFiles && this.$refs.refuploadattach.uploadFiles.length > 0) {
+          for (let i = 0; i < this.$refs.refuploadattach.uploadFiles.length; i++) {
+            if (this.$refs.refuploadattach.uploadFiles[i].status !== 'success') {
+              return false
+            }
+          }
+        }
+        return true
+      },
+      getattachissuccess() {
+        this.SubfileForm.FileUrl = ''
+        if (this.$refs.refuploadattach.uploadFiles && this.$refs.refuploadattach.uploadFiles.length > 0) {
+          for (let i = 0; i < this.$refs.refuploadattach.uploadFiles.length; i++) {
+            if (this.$refs.refuploadattach.uploadFiles[i].status === 'success') {
+              for (let j = 0; j < this.waituploads.length; j++) {
+                if (this.waituploads[j].uid === this.$refs.refuploadattach.uploadFiles[i].uid) {
+                  this.SubfileForm.FileUrl =
+                    `${this.waituploads[j].url}/${this.waituploads[j].fid}|${this.$refs.refuploadattach.uploadFiles[i].name}`
+                  this.SubfileForm.FileName = `${this.$refs.refuploadattach.uploadFiles[i].name}`
+                }
+              }
+            }
+          }
+        }
+      },
+      clickachment(url, uid) {
+        window.open(`http://${url}`)
+      },
+      deletefile() {
+        let _this = this
+        _this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          })
+          .then(() => {
+            _this.doclist = []
+          })
+          .catch(() => {})
+      },
+
+      seachdata() {
+        this.initData()
+      },
+      jstimehandle(val) {
+        if (val === '') {
+          return '----'
+        } else if (val === '0001-01-01T00:00:00Z') {
+          return '----'
+        } else if (val === '0001-01-01T08:00:00+08:00') {
+          return '----'
+        } else if (val === '5000-01-01T23:59:59+08:00') {
+          return '永久'
+        } else {
+          val = val.replace('T', ' ')
+          return val.substring(0, 10)
+        }
+      },
+    }
+  }
+
+</script>
+
+<style lang='scss'>
+  .attach-uploader .el-upload {
+    border: 1px dashed #63B8FF;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    // margin-bottom: -17px;
+    margin-top: -15px;
+    margin-left: 20px
+  }
+
+  .attach-uploader .el-upload:hover {
+    border-color: #228B22;
+  }
+
+  .attach-uploader-icon {
+    font-size: 25px;
+    color: #63B8FF;
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+  }
+
+  .attach-uploader-icon:hover {
+    color: #228B22;
+  }
+
+</style>