<template>
  <q-card class="q-px-md" style="width:1100px;max-width:1100px;">
    <q-card-section class="row items-center q-pb-none">
      <div class="text-h6">新增出库单</div>
      <q-space />
      <q-btn icon="close" flat round dense v-close-popup />
    </q-card-section>
    <q-card-section style="max-height:75vh;" class="scroll">
      <div class="row" style="margin-bottom:10px ;">
        <div class="col q-mr-md">
          <q-select dense standout behavior="menu" filled v-model="model.Type" ref="type" :options="typeOption"
            option-label="name" option-value="id" label="类型" emit-value map-options :rules="[val => !!val || '请选择类型']"
            @input="changeSelect" />
        </div>
        <div class="col ">
          <q-input standout bottom-slots filled v-model="model.Remark" type="text" ref="Remark" label="备注" dense />
        </div>
      </div>
      <div class="text-subtitle2 text-weight-bold q-mb-md row items-center q-pb-none">
        <span>列表</span>
        <q-space />
        <q-btn color="primary" size="11px" @click="showhaocai" v-if="model.Type===2">选择耗材</q-btn>
        <q-btn color="primary" size="11px" @click="addclass_haocai" v-if="model.Type===1||model.Type===3">添加</q-btn>
      </div>
      <div class="q-mt-md">
        <!-- 班级相关 -->
        <q-table :pagination="pageInfo" no-data-label="暂无相关数据" flat
          class="sticky-column-table sticky-header-table sticky-right-column-table no-bottom-table" separator="none"
          :data="dataList_class" :columns="model.Type!=2?columns:columns2" row-key="name">
          <template v-slot:body-cell-SchoolName="props">
            <q-td :props="props" class="text-negative">
              <q-select dense standout behavior="menu" filled v-model="props.row.SchoolId" ref="school"
                :options="schoolList" option-label="SName" option-value="SId" emit-value map-options
                :rules="[val => !!val||val>=-1 || '请选择校区']" @input="filterSchoolFn($event,props.rowIndex)" />
            </q-td>
          </template>
          <template v-slot:body-cell-ClassName="props">
            <q-td :props="props" class="text-negative">
              <q-select v-show="model.Type==1" dense standout behavior="menu" filled v-model="props.row.ClassId"
                ref="class" use-input :options="classList" option-label="allName" option-value="ClassId" emit-value
                map-options @filter="classfilter" :rules="[val => !!val || '请选择班级']"
                @input='filterCourseFn($event,props.rowIndex)' />
              <q-input v-show="model.Type==3" dense standout filled v-model="props.row.OrderId"
                style="min-width: 150px;" label="订单ID" :rules="[val => !!val || '请输入约课订单']"
                @blur='filterOrderFn($event,props.rowIndex)' />
            </q-td>
          </template>
          <template v-slot:body-cell-Name="props">
            <q-td :props="props">
              <div v-for="item in props.row.haocaiList" :key="item.id" class="td_height">
                {{ item.Name||'/' }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-BrandName="props">
            <q-td :props="props">
              <div v-for="item in props.row.haocaiList" :key="item.id" class="td_height">
                {{ item.BrandName||'/' }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-CategoryName="props">
            <q-td :props="props">
              <div v-for="item in props.row.haocaiList" :key="item.id" class="td_height">
                {{ item.CategoryName||'/' }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-SupplierName="props">
            <q-td :props="props">
              <div v-for="item in props.row.haocaiList" :key="item.id" class="td_height">
                {{ item.SupplierName||'/' }}
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-InventoryNum="props">
            <q-td :props="props">
              <div v-for="item in props.row.haocaiList" :key="item.id" class="td_height">
                {{ item.InventoryNum}}
              </div>
            </q-td>
          </template>

          <template v-slot:body-cell-Number="props">
            <q-td :props="props" class="text-negative">
              <div v-for="(item,index) in props.row.haocaiList" :key="item.id">
                <q-input standout filled v-model.number="item.Number" type="number" ref="number" :min='0'
                  :max='item.InventoryNum' dense
                  @input="chukuNum_class(item.Number,item.InventoryNum,index,props.rowIndex)" />
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-caozuo="props">
            <q-td :props="props" class="text-negative">
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="选择"
                @click="showhaocai(props.row,props.rowIndex)" />
              <q-btn flat size="xs" icon="iconfont icon-shanchu" color="negative" style="font-weight:400"
                class="q-mr-xs" label="" @click="delhaocai_class(props.rowIndex)" />
            </q-td>
          </template>
          <template v-slot:bottom>

          </template>
        </q-table>
      </div>

    </q-card-section>
    <q-card-actions align="right" class="bg-white">
      <q-btn label="取消" flat color="primary" v-close-popup />
      <q-btn label="创建出库单" color="accent" class="q-px-md" style="font-weight:400 !important" @click="saveStockOut" />
    </q-card-actions>
    <!-- 选择耗材 -->
    <q-dialog v-model="haochaidig" persistent>
      <q-card class="q-px-md" style="width:1000px;max-width:1000px;">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">选择耗材</div>
          <q-space />
          <q-btn icon="close" flat round dense v-close-popup />
        </q-card-section>
        <el-form class="MyEditForm" :model="haochaimsg">

          <div class="col row wrap q-mr-lg q-col-gutter-md">
            <div class="col-3">
              <q-input clearable standout="bg-primary text-white" v-model="haochaimsg.Name" label="耗材名称"
                maxlength="20" />
            </div>
            <div class="col-3">
              <q-input clearable standout="bg-primary text-white" v-model="haochaimsg.SuppliesNum" label="耗材编码"
                maxlength="20" />
            </div>
            <div style="display:flex;align-items:center;">
              <q-btn color="primary" size="11px" @click="gethaocai">查询</q-btn>
            </div>
          </div>
          <el-row>
            <div style="position: relative" class="MyEditForm">
              <div class="myScroll" style="overflow: scroll; max-height: 500px; margin-top: 20px">
                <table style="width: 1250px; min-width: 1000px" class="myTable" border="0" cellspacing="0"
                  cellpadding="0">
                  <thead>
                    <th>
                      <input class="color-input-red" type="checkbox" v-model="hcisCkedAll" @click="hccheckAll()" />
                    </th>
                    <th>耗材编码</th>
                    <th>耗材名称</th>
                    <th>分类名称</th>
                    <th>品牌名称</th>
                    <th>供应商</th>
                    <th>金额</th>
                    <!-- <th>库存</th> -->
                    <!-- <th>操作时间</th> -->
                    <!-- <th>操作人</th> -->
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in haocaiList" :key="index">
                      <td>
                        <input class="color-input-red" type="checkbox" v-model="hccheckList" :value="item"
                          @click="hccheckOne" />
                      </td>
                      <td>{{ item.SuppliesNum }}</td>
                      <td>{{ item.Name }}</td>
                      <td>{{ item.CategoryName }}</td>
                      <td>{{ item.BrandName }}</td>
                      <td>{{ item.SupplierName }}</td>
                      <td>{{ item.Money }}</td>
                      <!-- <td>{{ item.InventoryNum }}</td> -->
                      <!-- <td>{{ item.UpdateDate }}</td> -->
                      <!-- <td>{{ item.UpdateBy }}</td> -->
                    </tr>
                    <tr v-show="haocaiList.length == 0">
                      <td colspan="12" align="center">暂无数据</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <q-pagination class="full-width justify-end" v-model="haochaimsg.pageIndex" color="primary"
                :max="haocaiPageCount" :input="true" @input="changePage" />
              <div class="btnformItem">
                <span class="submitBtn" type="primary" @click="chooseHc">确定</span>
                <span class="exitBtn" @click="haochaidig = false">取消</span>
              </div>
            </div>
          </el-row>
        </el-form>
      </q-card>
    </q-dialog>
  </q-card>
</template>

<script>
  import {
    getSchoolDropdown, //获取班级下拉列表
    getClassPage_ck
  } from '../../api/school/index'; //获取校区列表
  import {
    getClassOrderForDetail
  } from '../../api/sale/sale'; //获取约课列表
  import {
    GetMaterialPageList,
    SuppliesStockOutApply
  } from '../../api/sale/StockOutApplyFor'
  export default {
    props: ["obj"],
    data() {
      return {
        typeOption: [{
            id: 3,
            name: "约课订单"
          },
          {
            id: 1,
            name: "班级相关"
          },
          {
            id: 2,
            name: "其他业务"
          }
        ],
        model: {
          Type: 3,
          Remark: "",
          DetailList: []
        },
        columns: [{
            name: "SchoolName",
            required: true,
            label: "校区",
            align: "left",
            style: "width:200px"
          },
          {
            name: "ClassName",
            required: true,
            label: "班级",
            align: "left",
            style: "width:400px"
          },
          {
            name: "CourseName",
            required: true,
            label: "课程",
            align: "left",
            field: "CourseName",
            style: "width:200px"
          },
          {
            name: "Name",
            required: true,
            label: "耗材名称",
            align: "left",
            field: "Name",
            style: "width:200px"
          },
          {
            name: "BrandName",
            required: true,
            label: "品牌",
            align: "left",
            field: "BrandName",
            style: "width:200px"
          },
          {
            name: "CategoryName",
            required: true,
            label: "分类",
            align: "left",
            field: "CategoryName",
            style: "width:200px"
          },
          //  {
          //   name: "SupplierName",
          //   required: true,
          //   label: "供应商",
          //   align: "left",
          //   field: "SupplierName",
          //   style:"width:200px"
          // },
          {
            name: "InventoryNum",
            required: true,
            label: "库存",
            align: "left",
            field: "InventoryNum",
            style: "width:200px"
          },
          {
            name: "Number",
            required: true,
            label: "出库数量",
            align: "left",
            style: "width:200px"
          },
          {
            name: "caozuo",
            required: true,
            label: "操作",
            align: "left",
            style: "width:200px"
          },
        ],
        columns2: [{
            name: "SchoolName",
            required: true,
            label: "校区",
            align: "left",
            style: "width:200px"
          },
          {
            name: "Name",
            required: true,
            label: "耗材名称",
            align: "left",
            field: "Name",
            style: "width:200px"
          },
          {
            name: "BrandName",
            required: true,
            label: "品牌",
            align: "left",
            field: "BrandName",
            style: "width:200px"
          },
          {
            name: "CategoryName",
            required: true,
            label: "分类",
            align: "left",
            field: "CategoryName",
            style: "width:200px"
          },
          {
            name: "SupplierName",
            required: true,
            label: "供应商",
            align: "left",
            field: "SupplierName",
            style: "width:200px"
          },
          {
            name: "InventoryNum",
            required: true,
            label: "库存",
            align: "left",
            field: "InventoryNum",
            style: "width:200px"
          },
          {
            name: "Number",
            required: true,
            label: "出库数量",
            align: "left",
            style: "width:200px"
          },
          {
            name: "caozuo",
            required: true,
            label: "操作",
            align: "left",
            style: "width:200px"
          },
        ],
        pageInfo: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12
        },
        courseList: [], //课程列表
        schoolList: [],
        classList: [],
        allclassList: [],
        dataList_class: [{
          SchoolName: "",
          SchoolId: -1,
          ClassName: "",
          ClassId: 0,
          CourseName: "",
          haocaiList: [],
          OrderId: '',
        }, ],
        dataList: [
          // {
          //     SchoolName:"",
          //     SchoolId:-1,
          //     ClassName:"",
          //     ClassId:0,
          //     CourseName:"",
          // },
        ],
        haochaidig: false, //选择耗材
        haochaimsg: {
          pageIndex: 1,
          pageSize: 10,
          FeeType: 0,
          Name: "",
          SuppliesNum: "",
          BrandName: "",
          CategoryId: "",
          SupplierName: "",
          FinanceId: "",
          IsSelectInventory: 1,
        },
        haocaiPageCount: 0,
        chooseHcIndex: 0,
        hcisCkedAll: [], //耗材全选
        hccheckList: [], //耗材多选
        haocaiList: [], //耗材选择列表
        haocaitotal: 0,
        hcisCkedAll: false,
        hccheckAllList: [],
        hcItemList: []
      };
    },
    watch: {
      dataList: {
        handler(val) {
          if (val) {
            this.$forceUpdate();
          }
        },
        deep: true
      }
    },
    created() {

    },
    mounted() {
      this.initObj();
      this.getSchool();
      this.getClass(-1);
      this.gethaocai();
    },
    methods: {
      //初始化对象
      initObj() {
        this.dataList = []
      },
      //创建出库单
      saveStockOut() {
        this.$refs.type.validate();
        if (
          !this.$refs.type.hasError
        ) {
          if (this.model.Type === 1) {
            this.model.DetailList = []
            this.dataList_class.map(item => {
              if (item.haocaiList.length > 0) {
                item.haocaiList.map(_item => {
                  let obj = {
                    SchoolName: item.SchoolName,
                    SchoolId: item.SchoolId,
                    ClassName: item.ClassName,
                    ClassId: item.ClassId,
                    CourseName: item.CourseName,
                    SuppliesId: _item.Id,
                    Number: _item.Number
                  }
                  this.model.DetailList.push(obj)
                })

              } else {
                return
              }


            })

          }
          if (this.model.Type === 2) {
            this.model.DetailList = []
            this.dataList_class.map(item => {
              if (item.haocaiList.length > 0) {
                item.haocaiList.map(_item => {

                  let obj = {
                    SchoolName: item.SchoolName,
                    SchoolId: item.SchoolId,
                    // ClassName:item.ClassName,
                    // ClassId:item.ClassId,
                    // CourseName:item.CourseName,
                    SuppliesId: _item.Id,
                    Number: _item.Number
                  }
                  this.model.DetailList.push(obj)
                })
              } else {
                return
              }
            })
          }
          if (this.model.Type === 3) {
            this.model.DetailList = []
            this.dataList_class.map(item => {
              if (item.haocaiList.length > 0) {
                item.haocaiList.map(_item => {
                  let obj = {
                    SchoolName: item.SchoolName,
                    SchoolId: item.SchoolId,
                    ClassName: item.CourseName,
                    ClassId: item.ClassId,
                    CourseName: item.ClassName,
                    SuppliesId: _item.Id,
                    Number: _item.Number
                  }
                  this.model.DetailList.push(obj)
                })

              } else {
                return
              }


            })

          }
          SuppliesStockOutApply(this.model).then(res => {
            if (res.data.resultCode === 1) {
              this.$emit("success")
              this.Success(res.data.message)
            } else {
              this.Error(res.data.message)
            }
          })
        }
      },
      //获取校区列表
      getSchool() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            tempArray.unshift({
              SId: -1,
              SName: "不限"
            })
            this.schoolList = tempArray;
          }
        })
      },
      //获取班级列表
      getClass() {
        getClassPage_ck({}).then(res => {
          if (res.Code == 1) {
            let tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            tempArray.forEach(x => {
              x.allName = x.ClassName + '(' + x.ClassNo + ')'
            })
            tempArray.unshift({
              ClassId: 0,
              ClassName: "不限",
              allName: '不限'
            })
            this.classList = tempArray;
            this.allclassList = JSON.parse(JSON.stringify(tempArray))
          }
        })
      },
      //获取订单详情
      getOrderDetails(data, index) {
        getClassOrderForDetail(data).then(res => {
          if (res.Code == 1) {
            this.dataList_class[index].ClassName = res.Data.ClassId;
            this.dataList_class[index].ClassId = res.Data.OrderId;
            this.dataList_class[index].CourseName = res.Data.ClassName;
            this.$forceUpdate();
          }
        })
      },
      classfilter(val, update) { //课程的栓选
        update(() => {
          if (val === '') {
            this.classList = this.allclassList
          } else {
            const needle = val.toLowerCase();
            this.classList = this.allclassList.filter(v => v.allName.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
      filterSchoolFn(val, index) {
        let school = this.schoolList.filter(item => {
          return item.SId == val
        })
        this.dataList_class[index].SchoolName = school[0].SName
        this.$forceUpdate();
      },
      filterCourseFn(val, index) {
        let course = this.classList.filter(item => {
          return item.ClassId == val
        })
        this.dataList_class[index].CourseName = course[0].CourseName
        this.dataList_class[index].ClassName = course[0].ClassName
        this.$forceUpdate();
      },
      filterOrderFn(val, index) {
        let data = {
          OrderId: this.dataList_class[index].OrderId
        }
        this.getOrderDetails(data, index)
      },
      changeSelect(value) {
        let arr = []
        this.dataList_class.forEach(item => {
          let obj = {
            SchoolName: item.SchoolName,
            SchoolId: item.SchoolId,
            ClassName: '',
            ClassId: '',
            CourseName: '',
            SuppliesId: item.Id,
            Number: item.Number,
            haocaiList: item.hcItemList,
          }
          arr.push(obj)
        })
        this.dataList_class = arr
      },
      //显示耗材列表
      showhaocai(row, index) {
        if (row.haocaiList && row.haocaiList.length == 0) {
          this.hccheckList = [];
        } else {
          this.hccheckList = row.haocaiList
        }
        // 1班级 2其他 3约课
        if (this.model.Type) {
          this.haochaidig = true
          this.chooseHcIndex = index
        } else {
          this.$q.notify({
            position: 'center',
            timeout: 2000,
            textColor: 'white',
            actions: [{
              icon: 'close',
              color: 'white'
            }],
            message: '请选择类型',
          })
        }
      },
      //获取耗材选择列表
      gethaocai() {
        this.hccheckList = [];
        GetMaterialPageList(this.haochaimsg).then(res => {
          if (res.data.resultCode === 1) {
            this.haocaiList = res.data.data.pageData;
            this.haocaitotal = res.data.data.count;
            this.haocaiPageCount = res.data.data.pageCount
            this.hccheckAllList = res.data.data.pageData;
          } else {
            this.Error(res.data.message);
          }
        })
      },
      hccheckOne() {
        //单选
        if (this.hccheckList.length < this.hccheckAllList.length) {
          this.hcisCkedAll = false;
        } else {
          this.hcisCkedAll = true;
        }
      },
      //耗材全选
      hccheckAll() {
        if (this.hcisCkedAll == true) {
          this.hccheckList = [];
        } else {
          this.hccheckList = [];
          this.hccheckAllList.forEach((item) => {
            this.hccheckList.push(item);
          });
        }
      },
      //选择耗材
      chooseHc() {
        this.$nextTick(() => {
          this.haochaidig = false;
          this.hccheckList.forEach((item) => {
            this.hcItemList.push(item);
          });
          let haocaidata = JSON.parse(JSON.stringify(Array.from(new Set(this.hccheckList))))
          this.dataList_class[this.chooseHcIndex].haocaiList = haocaidata
        })
      },
      addclass_haocai() {
        let obj = {
          SchoolName: "",
          SchoolId: -1,
          ClassName: "",
          ClassId: 0,
          CourseName: "",
          haocaiList: []
        }
        this.dataList_class.push(obj)
      },
      //删除耗材
      delhaocai_class(index) {
        this.dataList_class.splice(index, 1);
      },
      delhaocai(index) {
        this.dataList.splice(index, 1);
      },

      //翻页
      changePage(val) {
        this.haochaimsg.pageIndex = val;
        this.gethaocai();
      },
      chukuNum_class(val, maxVal, index, rowIndex) {
        if (val > maxVal) {
          this.dataList_class[rowIndex].haocaiList[index].Number = maxVal
          this.dataList_class[rowIndex - 1].haocaiList[index].Number = maxVal
        } else if (val < 0 || val == undefined || val == null) {
          this.dataList_class[rowIndex].haocaiList[index].Number = 0
        }
      },
      chukuNum(val, maxVal, index) {
        if (val > maxVal) {
          this.dataList[index].Number = maxVal
        } else if (val < 0 || val == undefined || val == null) {
          this.dataList[index].Number = 0
        }
      },
    },
  };

</script>

<style>
  /* myTable */

  .myTable {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    font-family: "Microsoft YaHei" !important;
    min-width: 1280px;
  }

  .myTable thead th {
    color: #000000;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    font-family: "muil";
    font-size: 14px;
  }

  .myTable thead tr {
    background: transparent !important;
  }


  /* .myTable .hoverSpan1{
    left: -20px;
}
.myTable .hoverSpan2{
    right: -20px;
} */

  .myTable .commonStyle {
    height: 100%;
    background: #fff;
    position: absolute;
    width: 20px;
    top: 0;
    display: none;
  }

  .myTable tr td {
    padding: 6px 0 6px 20px !important;
  }

  .myTable tbody tr {
    background: #fff;
    border-bottom: 1px solid #F8FAFB;
    cursor: pointer;
  }

  .myTable tbody tr:last-child {
    border-bottom: none;
  }

  .noHoverTable tr {
    border-bottom: none !important;
  }

  .noHoverTable tr:nth-child(even) {
    background: #fff !important;
  }

  .myTable tr:nth-child(even) {
    background: #F6F9FB;
  }

  .myTable tbody .trNobottom:first-child {
    border-top: none !important;
  }

  .myTable .trNobottom {
    border-top: 1px solid #E2E4EB !important;
    border-bottom: none !important;
  }

  .myTable tbody tr:hover {
    box-shadow: 0px 0 20px 0px rgba(176, 176, 176, 0.2);
    transition: transform .5s ease;
    /* transform: scaleX(1.02); */
  }

  .noHoverTable tbody tr:hover {
    box-shadow: 0 0 0 transparent !important;
  }

  .myTable tbody tr:hover .commonStyle {
    /* display: block; */
    transition: transform .5s ease;
    box-shadow: 0px 0px 0px 0px rgba(176, 176, 176, 0.2);
  }

  .myTable tbody tr:hover td {
    border-radius: 0 !important;
  }

  .myTable tbody tr:first-child td:first-child {
    border-radius: 20px 0 0 0;
  }

  .myTable tbody tr:first-child td:last-child {
    border-radius: 0 20px 0 0;
  }

  .myTable tbody tr:last-child td:first-child {
    border-radius: 0 0 0 20px;
  }

  .myTable tbody tr:last-child td:last-child {
    border-radius: 0 0 20px 0;
  }

  .borderTable tbody tr:first-child td:first-child {
    border-radius: 0 !important;
  }

  .borderTable tbody tr:first-child td:last-child {
    border-radius: 0 !important;
  }



  .borderTable {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    font-family: "Microsoft YaHei" !important;
  }

  .borderTable thead th {
    color: #000000;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    font-family: "PingFangR";
  }

  .borderTable thead tr {
    background: transparent !important;
  }

  .borderTable .hoverSpan1 {
    left: -20px;
  }

  .borderTable .hoverSpan2 {
    right: -20px;
  }

  .borderTable .commonStyle {
    height: 100%;
    background: #fff;
    position: absolute;
    width: 20px;
    top: 0;
    display: none;
  }

  .borderTable tr {
    background: #fff;
    cursor: pointer;
  }




  /* .borderTable .trNobottom{
    border-top:  4px solid #F8FAFB!important;
    border-bottom:none!important;
} */

  .borderTable tbody tr:hover {
    box-shadow: 0px 0 20px 0px rgba(176, 176, 176, 0.2);
    transition: transform .5s ease;
    /* transform: scaleX(1.02); */
  }

  .borderTable tbody tr:hover .commonStyle {
    display: block;
    transition: transform .5s ease;
    box-shadow: 0px 0px 0px 0px rgba(176, 176, 176, 0.2);
  }

  .borderTable tbody tr:hover td {
    border-radius: 0 !important;
  }

  .borderTable tbody tr:first-child td:first-child {
    border-radius: 20px 0 0 0;
  }

  .borderTable tbody tr:first-child td:last-child {
    border-radius: 0 20px 0 0;
  }

  .borderTable tbody tr:last-child td:first-child {
    border-radius: 0 0 0 20px;
  }

  .borderTable tbody tr:last-child td:last-child {
    border-radius: 0 0 20px 0;
  }

  .borderTable tr td {
    position: relative;
    padding: 11px 0 11px 20px;
    border: 1px solid #E2E4EB;
  }

  .tableMoreUl {
    background: #F6F9FB;
    width: 100%;
    font-size: 12px;
  }

  .tableMoreUl li {
    border-bottom: 1px solid #E2E4EB;
    padding: 12px;
  }

  .tableMoreUl li span {
    display: inline-block;
    width: 22%;
  }

  .tableMoreUl li:last-child {
    border-bottom: none;
  }

  .el-textarea__inner {
    border: none !important;
    outline: none !important;
  }

  .myTable tbody .noData td {
    border-radius: 0 !important;
  }

  .MyEditForm .btnformItem {
    display: block !important;
    text-align: center;
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: "Microsoft YaHei";
  }

  .MyEditForm .btnformItem span {
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-radius: 22px;
    cursor: pointer;
  }

  .MyEditForm .btnformItem .submitBtn {
    background-color: var(--q-color-primary);
    color: #fff;
    margin-right: 20px;
  }

  .MyEditForm .btnformItem .exitBtn {
    border: 1px solid var(--q-color-primary);
    color: var(--q-color-primary);
  }

  .MyEditForm .is-required::after,
  .is-required::before {
    position: absolute;
    left: -12px;
    top: 15px;
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
  }

  td .q-field--with-bottom {
    padding-bottom: 0px
  }

  td .td_height {
    height: 40px;
    line-height: 40px;
  }

</style>
