123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- <script>
- import { post, get } from '../../utils/request'
- export default {
- data() {
- return {
- file: {},
- fileList: [],
- loading: false
- }
- },
- methods: {
- // 重置表单
- resetForm (formName) {
- this.file = {}
- },
- //提交表单
- submitFormVolume(){
- if (this.loading) return
- this.loading = true
- this.$refs.upload.submit()
- const formData = new FormData()
- formData.append("file",this.file)
- post('/pdf-tech/vppLicenseCode/cancelLicenceAssignBatch', formData).then((res) => {
- setTimeout(() => {
- this.loading = false
- }, 1000)
- if(res.data.code === 200){
- this.$message({
- duration: 5000,
- message: 'Assign Success!',
- type: "success",
- })
- }
- })
- },
- //上传文件
- upLoadChange(file){
- this.file = file
- this.fileList.push(file)
- return false
- }
- },
- }
- </script>
- <template>
- <div>
- <h1 class="text-28px leading-40px mb-15px font-700">Volume Cancel </h1>
-
- <div class="bg-[#fff] card rounded-8px">
- <!-- 批量添加 -->
- <el-form
- label-position="top"
- label-width="100px"
- inline-message
- class="p-40px"
- >
- <el-form-item>
- <span slot="label" class="label">
- <span class="text-[24px] leading-32px">
- XLSX with users
- </span>
- <br>
- <span class="text-[14px] leading-20px text-[#808185]">
- Upload a XLSX file to add users.You can download the sample XLSX file for an example of the format.
- </span>
- </span>
- </el-form-item>
- <el-form-item>
- <el-upload
- class="upload-demo"
- drag
- action="111"
- :before-upload="upLoadChange"
- :auto-upload="false"
- :limit="1"
- accept=".xlsx"
- ref="upload">
- <div class="el-upload__text">Drag or drop XLSX file here or <em>browse</em></div>
- </el-upload>
- </el-form-item>
- <el-form-item>
- <span slot="label" class="label leading-20px text-[#1460F3] hover:opacity-70 cursor-pointer">
- <a href="/public/download/批量取消授权导入模板.xlsx" download="批量取消授权导入模板.xlsx">
- Download sample XLSX <img src="@/assets/images/downLoadBlue.svg" class="inline-block ">
- </a>
- </span>
- </el-form-item>
- <el-form-item>
- <button
- type="button"
- @click="resetForm('formData')"
- class="
- w-168px
- h-48px
- border-1px border-[#1460F3]
- text-[#1460F3]
- rounded-8px
- mr-16px
- font-bold
- hover:opacity-80
- "
- >
- Cancel
- </button>
- <button
- type="button"
- @click="submitFormVolume()"
- class="
- w-168px
- h-48px
- bg-[#1460F3]
- text-[#fff]
- rounded-8px
- font-bold
- hover:opacity-80
- "
- >
- Add
- </button>
- </el-form-item>
- </el-form>
- </div>
- </div>
- </template>
- <style lang="scss" scoped>
- .hand {
- cursor: pointer;
- }
- .el-form-item::v-deep label {
- color: #232a40 !important;
- }
- .card {
- border-radius: 8px;
- border-top-left-radius: 0px;
- }
- .required::v-deep label::before {
- display: none;
- }
- .el-form-item::v-deep label {
- font-weight: 700;
- padding: 0;
- margin-left: 8px;
- }
- .el-select-dropdown::v-deep .popper__arrow {
- display: none;
- }
- ::v-deep .el-upload__text{
- margin: 70px 0;
- color: #808185;
- }
- ::v-deep .el-upload-dragger{
- border: 1px solid #d9d9d9;
- width: 100%;
- }
- ::v-deep .el-upload{
- width: 50%;
- }
- ::v-deep .el-upload-list__item{
- width: 50%;
- }
- </style>
- <style lang="scss">
- .popper__arrow {
- display: none !important;
- }
- .el-select-dropdown {
- margin-top: 0 !important;
- }
- .el-message--success {
- margin-top: 90px !important;
- background-color: #373A47 !important;
- height: 36px;
- min-width: auto !important;
- padding: 12px !important;
- p{
- color: #fff !important;
- }
- }
- </style>
|