VolumeCancel.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <script>
  2. import { post, get } from '../../utils/request'
  3. export default {
  4. data() {
  5. return {
  6. file: {},
  7. fileList: [],
  8. loading: false
  9. }
  10. },
  11. methods: {
  12. // 重置表单
  13. resetForm (formName) {
  14. this.file = {}
  15. },
  16. //提交表单
  17. submitFormVolume(){
  18. if (this.loading) return
  19. this.loading = true
  20. this.$refs.upload.submit()
  21. const formData = new FormData()
  22. formData.append("file",this.file)
  23. post('/pdf-tech/vppLicenseCode/cancelLicenceAssignBatch', formData).then((res) => {
  24. setTimeout(() => {
  25. this.loading = false
  26. }, 1000)
  27. if(res.data.code === 200){
  28. this.$message({
  29. duration: 5000,
  30. message: 'Assign Success!',
  31. type: "success",
  32. })
  33. }
  34. })
  35. },
  36. //上传文件
  37. upLoadChange(file){
  38. this.file = file
  39. this.fileList.push(file)
  40. return false
  41. }
  42. },
  43. }
  44. </script>
  45. <template>
  46. <div>
  47. <h1 class="text-28px leading-40px mb-15px font-700">Volume Cancel </h1>
  48. <div class="bg-[#fff] card rounded-8px">
  49. <!-- 批量添加 -->
  50. <el-form
  51. label-position="top"
  52. label-width="100px"
  53. inline-message
  54. class="p-40px"
  55. >
  56. <el-form-item>
  57. <span slot="label" class="label">
  58. <span class="text-[24px] leading-32px">
  59. XLSX with users
  60. </span>
  61. <br>
  62. <span class="text-[14px] leading-20px text-[#808185]">
  63. Upload a XLSX file to add users.You can download the sample XLSX file for an example of the format.
  64. </span>
  65. </span>
  66. </el-form-item>
  67. <el-form-item>
  68. <el-upload
  69. class="upload-demo"
  70. drag
  71. action="111"
  72. :before-upload="upLoadChange"
  73. :auto-upload="false"
  74. :limit="1"
  75. accept=".xlsx"
  76. ref="upload">
  77. <div class="el-upload__text">Drag or drop XLSX file here or <em>browse</em></div>
  78. </el-upload>
  79. </el-form-item>
  80. <el-form-item>
  81. <span slot="label" class="label leading-20px text-[#1460F3] hover:opacity-70 cursor-pointer">
  82. <a href="/public/download/批量取消授权导入模板.xlsx" download="批量取消授权导入模板.xlsx">
  83. Download sample XLSX <img src="@/assets/images/downLoadBlue.svg" class="inline-block ">
  84. </a>
  85. </span>
  86. </el-form-item>
  87. <el-form-item>
  88. <button
  89. type="button"
  90. @click="resetForm('formData')"
  91. class="
  92. w-168px
  93. h-48px
  94. border-1px border-[#1460F3]
  95. text-[#1460F3]
  96. rounded-8px
  97. mr-16px
  98. font-bold
  99. hover:opacity-80
  100. "
  101. >
  102. Cancel
  103. </button>
  104. <button
  105. type="button"
  106. @click="submitFormVolume()"
  107. class="
  108. w-168px
  109. h-48px
  110. bg-[#1460F3]
  111. text-[#fff]
  112. rounded-8px
  113. font-bold
  114. hover:opacity-80
  115. "
  116. >
  117. Add
  118. </button>
  119. </el-form-item>
  120. </el-form>
  121. </div>
  122. </div>
  123. </template>
  124. <style lang="scss" scoped>
  125. .hand {
  126. cursor: pointer;
  127. }
  128. .el-form-item::v-deep label {
  129. color: #232a40 !important;
  130. }
  131. .card {
  132. border-radius: 8px;
  133. border-top-left-radius: 0px;
  134. }
  135. .required::v-deep label::before {
  136. display: none;
  137. }
  138. .el-form-item::v-deep label {
  139. font-weight: 700;
  140. padding: 0;
  141. margin-left: 8px;
  142. }
  143. .el-select-dropdown::v-deep .popper__arrow {
  144. display: none;
  145. }
  146. ::v-deep .el-upload__text{
  147. margin: 70px 0;
  148. color: #808185;
  149. }
  150. ::v-deep .el-upload-dragger{
  151. border: 1px solid #d9d9d9;
  152. width: 100%;
  153. }
  154. ::v-deep .el-upload{
  155. width: 50%;
  156. }
  157. ::v-deep .el-upload-list__item{
  158. width: 50%;
  159. }
  160. </style>
  161. <style lang="scss">
  162. .popper__arrow {
  163. display: none !important;
  164. }
  165. .el-select-dropdown {
  166. margin-top: 0 !important;
  167. }
  168. .el-message--success {
  169. margin-top: 90px !important;
  170. background-color: #373A47 !important;
  171. height: 36px;
  172. min-width: auto !important;
  173. padding: 12px !important;
  174. p{
  175. color: #fff !important;
  176. }
  177. }
  178. </style>