dy-admin-manager/src/views/resetTeaming/components/strudentPayInfo.vue

<!--  -->
<template>
  <div class="m-container">
    <el-page-header @back="goBack" content="学员缴费记录"> </el-page-header>
    <!--    this.info = {
            paymentStatus: res.data.calender.paymentStatus,
            startPaymentDate: res.data.calender.startPaymentDate,
            deadlinePaymentDate: res.data.calender.deadlinePaymentDate,
            expectNum: res.data.calender.expectNum,
            actualNum: res.data.calender.actualNum,
            sumActualAmount: res.data.sumActualAmount
          } -->
    <statistic :span="4" :col="5">
      <statistic-item>
        <span>状态</span>
        <span>
          <p
            class="status"
            style="color: #ff6a6a"
            v-if="info.paymentStatus == 'OPEN'"
          >
            {{ "已开启" }}
          </p>
          <p
            class="status"
            style="color: #ff6a6a"
            v-if="info.paymentStatus == 'NO'"
          >
            {{ "未开始" }}
          </p>
          <p
            class="status"
            style="color: #5ccdb8"
            v-if="info.paymentStatus == 'OVER'"
          >
            {{ "已结束" }}
          </p>
        </span>
      </statistic-item>
      <statistic-item>
        <span>预计缴费日期</span>
        <span style="font-size: 16px"
          >{{ info.startPaymentDate | formatTimer }} ~
          {{ info.deadlinePaymentDate | formatTimer }}</span
        >
      </statistic-item>
      <statistic-item>
        <span>预计缴费人数</span>
        <span>{{ info.expectNum ? info.expectNum : 0 }}</span>
      </statistic-item>
      <statistic-item>
        <span>实际缴费人数</span>
        <span>{{ info.actualNum ? info.actualNum : 0 }}</span>
      </statistic-item>
      <statistic-item>
        <span>收款金额</span>
        <span>{{ info.sumActualAmount ? info.sumActualAmount : 0 }}</span>
      </statistic-item>
    </statistic>
    <!-- <div class="infoMsg">
      <div class="left">
        <p class="title">状态</p>

        <p class="status"
           style="color: #ff6a6a"
           v-if="info.paymentStatus == 'OPEN'">
          {{ "已开启" }}
        </p>
        <p class="status"
           style="color: #ff6a6a"
           v-if="info.paymentStatus == 'NO'">
          {{ "未开始" }}
        </p>
        <p class="status"
           style="color: #5ccdb8"
           v-if="info.paymentStatus == 'OVER'">
          {{ "已结束" }}
        </p>
      </div>
      <div class="right">
        <div class="expectBox first">
          <p class="title">预计缴费日期</p>
          <p class="status">
            {{ info.startPaymentDate | formatTimer }}~{{
              info.deadlinePaymentDate | formatTimer
            }}
          </p>
        </div>
        <div class="expectBox">
          <p class="title">预计缴费人数</p>
          <p class="status">{{ info.expectNum ? info.expectNum : 0 }}</p>
        </div>
        <div class="expectBox">
          <p class="title">实际缴费人数</p>
          <p class="status">{{ info.actualNum ? info.actualNum : 0 }}</p>
        </div>
        <div class="expectBox">
          <p class="title">收款金额</p>
          <p class="status">
            {{ info.sumActualAmount ? info.sumActualAmount : 0 }}
          </p>
        </div>
      </div>
    </div> -->

    <div class="m-core">
      <save-form
        save-key="strudent-pay-info"
        :inline="true"
        :model.sync="searchForm"
        @submit="search"
        @reset="onReSet"
      >
        <el-form-item>
          <el-input
            v-model.trim="searchForm.search"
            @keyup.enter.native="search"
            placeholder="学员编号,手机号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.subjectId"
            style="width: 180px"
            clearable
            filterable
            placeholder="请选择声部"
          >
            <el-option
              v-for="(item, index) in soundList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.paymentStatus"
            style="width: 180px"
            clearable
            filterable
            placeholder="请选择状态"
          >
            <el-option label="未缴费" value="NON_PAYMENT"></el-option>
            <el-option label="缴费中" value="PROCESSING"></el-option>
            <el-option label="已缴费" value="PAID_COMPLETED"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.musicGroupStatus"
            style="width: 180px"
            clearable
            filterable
            placeholder="请选择学员状态"
          >
            <el-option label="在读" value="NORMAL"></el-option>
            <el-option label="退团" value="QUIT"></el-option>
            <el-option label="休学" value="QUIT_SCHOOL"></el-option>
            <el-option label="报名" value="APPLY"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button native-type="suubmit" type="danger">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
        </el-form-item>
      </save-form>
      <!--   NO: '未开启缴费',
  OPEN: '开启缴费',
  OVER: '缴费已结束', -->
      <div class="wrap">
        <div class="newBand" @click="detailVisible = true">缴费详情</div>
        <div
          class="newBand"
          @click="resetPay"
          v-permission="'musicGroupPaymentCalenderDetail/updateExpectAmount'"
        >
          修改缴费金额
        </div>
        <div
          class="newBand"
          @click="startPay"
          v-if="info.paymentStatus != 'OPEN'"
          v-permission="'musicGroupPaymentCalenderDetail/openPayment'"
        >
          开启缴费
        </div>
        <div
          class="newBand"
          @click="payRemind"
          v-permission="'musicGroupPaymentCalenderDetail/sendWaitRenewMessage'"
        >
          缴费提醒
        </div>
        <!-- <div
          class="newBand"
          @click="addStudentBtn"
          v-if="info.paymentStatus != 'OVER'"
          v-permission="'musicGroupPaymentCalenderDetail/add'"
        >
          新增学员
        </div> -->
        <div
          class="newBand"
          @click="delStudentBtn"
          v-if="titleForm.paymentType != 'SPAN_GROUP_CLASS_ADJUST'"
          v-permission="'musicGroupPaymentCalenderDetail/batchDel'"
        >
          删除学员
        </div>
        <div
          class="newBand"
          v-permission="'export/musicGroupPaymentCalenderDetail'"
          @click="onMusicGroupPaymentCalenderDetail"
        >
          缴费记录导出
        </div>
      </div>

      <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="tableList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            :selectable="checkSelect"
            width="55"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="userId"
            label="学员编号"
          ></el-table-column>
          <el-table-column align="center" prop="studentId" label="学员姓名">
            <template slot-scope="scope">
              <div v-if="scope.row.sysUser">
                {{ scope.row.sysUser.username }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="学员声部">
            <template slot-scope="scope">
              <div v-if="scope.row.studentRegistration">
                {{ scope.row.studentRegistration.subjectName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="学员状态">
            <template slot-scope="scope">
              <div v-if="scope.row.studentRegistration">
                {{
                  scope.row.studentRegistration.musicGroupStatus
                    | studentTeamStatus
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="studentId" label="手机号">
            <template slot-scope="scope">
              <div v-if="scope.row.sysUser">
                {{ scope.row.sysUser.phone }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="expectAmount"
            label="预计缴费金额"
          ></el-table-column>
          <el-table-column align="center" label="缴费开始日期">
            <template slot-scope="scope">
              <div>
                {{ scope.row.startPaymentDateMgpc | formatTimer }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="缴费截止日期">
            <template slot-scope="scope">
              <div>
                {{ scope.row.deadlinePaymentDateMgpc | formatTimer }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否开启缴费">
            <template slot-scope="scope">
              <div>
                {{ scope.row.open ? "是" : "否" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="缴费状态">
            <template slot-scope="scope">
              <div>
                {{ scope.row.paymentStatus | paymentStatusDetall }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="studentId" label="支付时间">
            <template slot-scope="scope">
              <div>
                {{ scope.row.payTime | dateForMinFormat }}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center"
                           width="200px"
                           label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           :disabled="!checkSelect(scope.row)"
                           @click="resetPay(scope.row)">修改金额</el-button>
                <el-button type="text"
                           :disabled="!checkSelect(scope.row)"
                           @click="startPay(scope.row)">开启缴费</el-button>
              </div>
            </template>
          </el-table-column> -->
        </el-table>
        <pagination
          sync
          saveKey="strudent-pay-info"
          :total.sync="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <!-- <el-dialog :visible.sync="payVisible"
               width="500px"
               title="修改缴费时间">
      <el-form :model="payForm"
               ref='payForm'>
        <el-form-item label="缴费开始日期"
                      :rules="[{ required: true, message: '请设置缴费开始日期',trigger: 'blur'}]"
                      prop="startDate">
          <el-date-picker v-model.trim="payForm.startDate"
                          type="date"
                          :picker-options="pickerOptions"
                          value-format="yyyy-MM-dd"
                          placeholder="开始日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="payVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="">确 定</el-button>
      </div>
    </el-dialog> -->

    <el-dialog
      :visible.sync="resetPayVisible"
      width="500px"
      title="修改缴费金额"
    >
      <el-form
        :model="resetPayForm"
        :inline="true"
        label-width="120px"
        label-position="right"
        ref="resetPayForm"
        @submit.native.prevent
      >
        <!-- <el-form-item label="学员姓名"
                      :rules="[{ required: true, message: '学员姓名',trigger: 'blur'}]"
                      prop="startDate">
          <el-input disabled
                    value="张三"></el-input>
        </el-form-item> -->
        <el-form-item
          label="预计缴费金额"
          :rules="[
            { required: true, message: '请输入预计缴费金额', trigger: 'blur' },
            {
              pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
              message: '请输入正确的金额',
              trigger: 'blur',
            },
          ]"
          prop="momey"
        >
          <el-input v-model="resetPayForm.momey"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetPayVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitReset">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="studentVisible" title="学生列表"
               width="600">
      <el-table :data="studentList"
                class="studenTable"
                ref="singleTable"
                highlight-current-row
                @current-change="handleCurrentChange">
        <!-- <el-table-column type="selection"
                         width="55">
        </el-table-column> -->
        <el-table-column
          property="userId"
          align="center"
          label="学员编号"
        ></el-table-column>
        <el-table-column
          property="name"
          align="center"
          label="学员姓名"
        ></el-table-column>
        <el-table-column
          property="phone"
          align="center"
          label="手机号"
        ></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleAdd">取 消</el-button>
        <el-button type="primary" @click="submitAddStudent">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog width="700px" title="查看缴费详情" :visible.sync="detailVisible">
      <studentPayDetail :msgList="msgList" :titleForm="titleForm" />
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import pagination from "@/components/Pagination/index";
import load from "@/utils/loading";
import cleanDeep from "clean-deep";
import qs from "qs";
import { courseType } from "@/utils/searchArray";
import { paymentPatternType } from "@/constant";
import studentPayDetail from "../modals/studentPayDetail";
import {
  findSound,
  getmusicGroupPaymentCalenderDetail,
  openMusicGroupPaymentCalenderDetailPayment,
  resetMusicGroupPaymentCalenderDetail,
  getMusicGroupPaymentCalenderDetail,
  queryCanAddStudent,
  addMusicGroupPaymentCalenderStudent,
  delMusicGroupPaymentCalenderStudent,
  sendWaitRenewMessage
} from "@/api/buildTeam";

export default {
  components: { pagination, studentPayDetail },
  data() {
    return {
      searchForm: {
        search: null,
        subjectId: null,
        paymentStatus: null,
        musicGroupStatus: null,
      },
      teacherList: [],
      soundList: [],
      tableList: [{ studentId: 111 }],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      payVisible: false,
      resetPayVisible: false,
      studentVisible: false,
      chioseStudent: null,
      studentList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() + 86400000 <= new Date().getTime();
        },
      },
      payForm: {
        startDate: null,
      },
      resetPayForm: {
        momey: null,
      },
      activeChiose: [],
      id: null,
      ids: null,
      info: {
        paymentStatus: null,
        startPaymentDate: null,
        deadlinePaymentDate: null,
        expectNum: null,
        actualNum: null,
        sumActualAmount: null,
      },

      msgList: [],
      detailVisible: false,
      titleForm: {
        paymentType: "",
        musicGroupOrganizationCourseSettingId: "",
        paymentPattern: "",
        paymentValidStartDate: "",
        paymentValidEndDate: "",
        calenderSettingsName: "",
      },
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 获取声部
    this.teamid = this.$route.query.id;
    findSound({ musicGroupId: this.teamid }).then((res) => {
      if (res.code == 200) {
        this.soundList = res.data;
      }
    });
    // 获取分部
    this.init();
  },
  activated() {
    this.teamid = this.$route.query.id;
    findSound({ musicGroupId: this.teamid }).then((res) => {
      if (res.code == 200) {
        this.soundList = res.data;
      }
    });
    this.init();
  },
  methods: {
    init() {
      this.getList();
    },
    getList() {
      this.id = this.$route.query.paymentId;
      // 获取缴费状态
      getMusicGroupPaymentCalenderDetail({ id: this.id }).then((res) => {
        if (res.code == 200) {
          this.info = {
            paymentStatus: res.data.calender.status,
            startPaymentDate: res.data.calender.startPaymentDate,
            deadlinePaymentDate: res.data.calender.deadlinePaymentDate,
            expectNum: res.data.calender.expectNum,
            actualNum: res.data.calender.actualNum,
            sumActualAmount: res.data.sumActualAmount,
          };
          this.titleForm = {
            paymentType: res.data.calender.paymentType,
            musicGroupOrganizationCourseSettingId:
              res.data.calenderSettingsName,
            paymentPattern:
              paymentPatternType[res.data.calender.paymentPattern],
            paymentValidStartDate: res.data.calender.paymentValidStartDate,
            paymentValidEndDate: res.data.calender.paymentValidEndDate,
            calenderSettingsName: res.data.calenderSettingsName,
          };
          this.msgList = res.data.musicGroupPaymentCalenderCourseSettings;
        }
      });
      this.searchForm.id = this.id;
      this.searchForm.page = this.rules.page;
      this.searchForm.rows = this.rules.limit;
      getmusicGroupPaymentCalenderDetail(this.searchForm).then((payment) => {
        if (payment.code == 200) {
          this.rules.total = payment.data.total;
          this.tableList = payment.data.rows;
        }
      });
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.searchForm = {
        search: null,
        subjectId: null,
        paymentStatus: null,
      };
      this.search();
    },
    checkSelect(val) {
      return val.paymentStatus == "NON_PAYMENT";
    },
    resetPay() {
      // this.activeRow = row;
      if (this.activeChiose.length < 1) {
        this.$message.error("请至少选择一名学员");
        return;
      }
      let ids = this.activeChiose.map((item) => {
        return item.id;
      });
      this.ids = ids.join(",");
      this.resetPayVisible = true;
    },
    // resetTime () {
    //   this.payVisible = true;
    // },
    goBack() {
      let query = this.$route.query;
      if (query.type == "resetTeam") {
        this.$store.dispatch("delVisitedViews", this.$route);
        this.$router.push({
          path: "/business/resetTeaming",
          query: { ...this.$route.query },
        });
      } else if (query.type == "look") {
        this.$store.dispatch("delVisitedViews", this.$route);
        this.$router.push({
          path: "/business/teamLookBase",
          query: { ...this.$route.query },
        });
      }else if(query.type == 'PRE_BUILD_FEE'){
             this.$store.dispatch("delVisitedViews", this.$route);
        this.$router.push({
          path: "/business/createPayment",
          query: { ...this.$route.query },
        });
      }
    },
    handleSelectionChange(val) {
      this.activeChiose = val;
      console.log(val);
    },
    startPay() {
      if (this.activeChiose.length < 1) {
        this.$message.error("请至少选择一名学员");
        return;
      }

      // console.log(this.activeChiose)
      let ids = this.activeChiose.map((item) => {
        return item.id;
      });
      ids = ids.join(",");
      // console.log(ids)
      openMusicGroupPaymentCalenderDetailPayment({ ids }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.getList();
        }
      });
    },
    submitReset() {
      let obj = {};
      obj.expectAmount = this.resetPayForm.momey;
      obj.ids = this.ids;
      resetMusicGroupPaymentCalenderDetail(obj).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.resetPayVisible = false;
          this.getList();
        }
      });
    },
    addStudentBtn() {
      console.log(
        "musicGroupId:",
        this.teamid,
        "musicGroupPaymentCalenderId:",
        this.id
      );
      // 获取无缴费学员
      queryCanAddStudent({
        musicGroupId: this.teamid,
        musicGroupPaymentCalenderId: this.id,
      }).then((res) => {
        if (res.code == 200) {
          this.studentList = res.data;
          this.studentVisible = true;
        }
      });
    },
    delStudentBtn() {
      if (this.activeChiose.length < 1) {
        this.$message.error("请至少选择一名学员");
        return;
      }
      this.$confirm(`是否删除此学员`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let musicGroupPaymentCalenderDetailIds = this.activeChiose
            .map((stu) => {
              return stu.id;
            })
            .join(",");
          delMusicGroupPaymentCalenderStudent({
            musicGroupPaymentCalenderDetailIds,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success(`删除成功`);
              this.$set(this.rules, "page", 1);
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    handleCurrentChange(val) {
      this.chioseStudent = val;
    },
    submitAddStudent() {
      if (!this.chioseStudent) {
        this.$message.error("请选择学员");
        return;
      }
      addMusicGroupPaymentCalenderStudent({
        musicGroupPaymentCalenderId: this.id,
        userId: this.chioseStudent.userId,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.studentVisible = false;
          this.getList();
        }
      });
    },
    onMusicGroupPaymentCalenderDetail() {
      let searchForm = this.searchForm;
      // 报表导出
      let url = "/api-web/export/musicGroupPaymentCalenderDetail";
      let data = {
        id: this.$route.query.paymentId,
        musicGroupId: this.$route.query.id,
      };
      const options = {
        method: "POST",
        headers: {
          Authorization: getToken(),
        },
        data: qs.stringify(cleanDeep(data)),
        url,
        responseType: "blob",
      };
      this.$confirm("您确定导出缴费记录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then((res) => {
              let blob = new Blob([res.data], {
                type: "application/vnd.ms-excel;charset=utf-8",
              });
              let text = new Response(blob).text();
              text.then((res) => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let fname = "缴费导出" + new Date().getTime() + ".xls"; //下载文件的名字
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });

              load.endLoading();
            })
            .catch((error) => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => {});
    },
    cancleAdd(row) {
      this.$refs.singleTable.setCurrentRow(row);
      this.studentVisible = false;
    },
    payRemind(){
       console.log(this.activeChiose)
       let submitArr = [];
       let msgArr = '';
       let str = ''
       this.activeChiose.forEach(item=>{
         if(item.open){
           submitArr.push(item.userId)
         }else{
           msgArr+=item?.sysUser?.username+','
         }
       })
       console.log(submitArr,msgArr)

       if(msgArr){
         str=`${msgArr}未开启缴费无法提醒`
       }else{
         str='是否发送提醒'
       }
      this.$confirm(str, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          try{
            const res = await sendWaitRenewMessage({studentIds:submitArr.join(','),calenderId:this.$route.query.paymentId})
            this.$message.success('提醒成功')
            this.getList()
          }catch(e){

          }
        }).catch(() => {

        });

    }
  },
  watch: {
    payVisible(val) {
      if (!val) {
        this.payForm = {
          startDate: null,
        };
        this.$refs["payForm"].resetFields();
      }
    },
    resetPayVisible(val) {
      if (!val) {
        this.resetPayForm = {
          momey: null,
        };
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.studenTable {
  height: 300px;
  overflow: auto;
}
.infoMsg {
  margin: 30px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  text-align: center;
  .title {
    color: #999;
    font-size: 14px;
    line-height: 30px;
    min-width: 100px;
  }
  .status {
    font-size: 20px;
  }
  .left {
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 60px;
    margin-right: 200px;
  }
  .right {
    text-align: center;
    height: 60px;
    line-height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .expectBox {
      width: 220px;
      border-right: 1px solid #ccc;
      &:nth-last-child(1) {
        border-right: none !important;
      }
    }
    .expectBox.first {
      width: 300px;
    }
  }
}
.wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  div {
    margin-right: 20px;
  }
}
.inputStyle {
  width: 180px;
}
</style>