anpinjingyuan-ui/src/views/costManagement/index.vue

<template>
  <div>
    <div v-if="pageDisplay" class="app-container">
      <formComponent
        v-if="searchWhether"
        :formOption="formOption"
        :dataList="dataList"
        :inDex="inDex"
        ref="avatar"
        @submitForm="submitForm"
        @returnToForm="returnToForm"
      />
      <listComponent
        :tableData="tableData"
        @selectionbox="selectionbox"
        @see="viewMethod"
        @modify="modification"
        @deletion="deletion"
        @buttonList="buttonList"
        @showSearch="showSearch"
        @feedback="feedback"
        @getList="getList"
        :tatolLabel="['金额合计']"
        :hasPermi="hasPermi"
        :isItHidden="isItHidden"
        :customButton="customButton"
        :listStyle="listStyle"
        :queryList="queryList"
        :setRowList="setRowList"
      />
      <!--      <el-pagination-->
      <!--        style="float: right;margin-top: 10px"-->
      <!--        @size-change="handleSizeChange"-->
      <!--        @current-change="handleCurrentChange"-->
      <!--        :page-sizes="[10, 20, 30, 50]"-->
      <!--        :page-size="this.formDataList.pageSize"-->
      <!--        background-->
      <!--        layout="sizes, prev, pager, next"-->
      <!--        :total="total">-->
      <!--      </el-pagination>-->
      <div style="float: right;margin-bottom: 10px">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="formDataList.pageNum"
          :limit.sync="formDataList.pageSize"
          :page-sizes="[10,100,200,500,1000]"
          @pagination="feedback('搜索')"
        />
      </div>
    </div>
    <div v-else class="app-container">
      <div style="display: flex;margin-bottom: 10px">
        <el-breadcrumb>
          <el-breadcrumb-item>
            <el-button
              size="mini"
              type="danger" plain
              @click="backToList"
              icon="el-icon-arrow-left"
            >
              返回列表
            </el-button>
          </el-breadcrumb-item>
          <!--          <el-breadcrumb-item style="font-weight: 700">-->
          <!--            <el-button-group>-->
          <!--              <el-button type="primary" size="mini" icon="el-icon-arrow-left" :disabled="forward" @click="sequence(true)">向前</el-button>-->
          <!--              <el-button type="primary" size="mini" :disabled="backward" @click="sequence(true)">向后<i class="el-icon-arrow-right el-icon&#45;&#45;right"></i></el-button>-->
          <!--            </el-button-group>-->
          <!--          </el-breadcrumb-item>-->
        </el-breadcrumb>
      </div>
      <h1 style="text-align: center;margin-top: -42px">费用管理</h1>
      <formComponent
        v-if="searchWhether"
        :formOption="contentOption"
        :dataList="dataList"
        :inDex="inDex"
        ref="avatar"
        @writeOff="writeOff"
        @submitForm="submitForm"
        @returnToForm="returnToForm"
        @submitAndSave="submitAndSave"
        @selectTrigger="selectTrigger"
      />
      <listComponent
        ref="listComponent"
        :tableData="contentList"
        @selectionbox="selectionbox"
        @see="viewMethod"
        @modify="modification"
        @deletion="deletion"
        @buttonList="buttonList"
        @showSearch="showSearch"
        @feedback="feedback"
        @getList="getList"
        @deletRows="deletRows"
        @totalAmount="totalAmount"
        @change="change"
        :hasPermi="hasPermi"
        :tatolLabel="tatolLabel"
        :isItHidden="isItHidden"
        :customButton="contentButton"
        :listStyle="contentStyle"
        :queryList="purchaseList"
        :setRowList="setRowList"
        :listData="listData"
      />
      <el-collapse>
        <el-collapse-item title="附件管理" name="1">
          <div style="padding-right: 10px">
            <c-upload :list="tEnclosure" ref="cUpload" :disabled="disabled"></c-upload>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>
    <approval-comments
      v-if="addOrUpdateVisib"
      ref="ApprovalComments"
      @refreshDataList="returnData"
    ></approval-comments>
    <el-dialog
      title="打印报销单"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      style="padding: 0;margin:0"
      width="70%"
    >
      <div ref="print">
        <table class="table table-striped table-bordered" align="center" valign="center">
          <tr>
            <td style="font-size: 24px;font-weight:bold" class="column" colspan="11">报销单</td>
          </tr>
          <tr>
            <td class="column" style="width: 6%;">部门</td>
            <td class="column" colspan="2" style="width: 19%;">{{formList.deptName}}</td>
            <td class="column" style="width: 9%;">报销方式</td>
            <td class="column" style="width: 9%;">{{formList.expenseTypeName}}</td>
            <td class="column" style="width: 9.5%;">业务类型</td>
            <td class="column" style="width: 9.5%;">{{formList.businessTypeName}}</td>
            <td class="column" style="width: 9.5%;">制单人</td>
            <td class="column" style="width: 9.5%;">{{formList.createBy}}</td>
            <td class="column" style="width: 9.5%;">制单日期</td>
            <td class="column" style="width: 9.5%;">{{formList.createTime?formList.createTime.slice(0,10):''}}</td>
          </tr>
          <tr>
            <td class="column">备注</td>
            <td class="column" colspan="10" style="text-align: left">{{formList.remark}}</td>
          </tr>
        </table>
        <table class="table table-striped table-bordered" align="center" valign="center">
          <tr>
            <td class="column" style="border-top: none;width: 6%">序号</td>
            <td class="column" style="border-top: none;width: 9.5%;">费用名称</td>
            <td class="column" style="border-top: none;width: 9.5%;">金额</td>
            <td class="column" style="border-top: none;width: 18%;">项目</td>
            <td class="column" style="border-top: none;width: 9.5%;">所属人员</td>
            <td class="column" style="border-top: none;width: 19%;" colspan="2">所属部门</td>
            <td class="column" style="border-top: none;width: 9.5%;">物料</td>
            <td class="column" style="border-top: none;width: 19%;" colspan="2">备注</td>
          </tr>
          <tr v-for="(item,index) in contentList" :key="index">
            <td class="column">{{ Number(index)+1 }}</td>
            <td class="column">{{ item.expenseName }}</td>
            <td class="column">{{ item.amount ? Number(item.amount).toFixed(2) : item.amount }}</td>
            <td class="column">{{ item.belongsProjectName }}</td>
            <td class="column">{{ item.personnelName }}</td>
            <td class="column" colspan="2">{{ item.departmentName }}</td>
            <td class="column">{{ item.matterName }}</td>
            <td class="column" colspan="2">{{ item.remark }}</td>
          </tr>
        </table>
        <table class="table table-striped table-bordered" align="center" valign="center">
          <tr>
            <td class="column" style="width: 14%;border-top: none">金额合计(小写)：</td>
            <td class="column" colspan="4" style="text-align: left;border-top: none;width: 40%">{{formList.totalAmount?formList.totalAmount.toFixed(2):''}}</td>
            <td class="column" style="width: 14%;border-top: none">金额合计(大写)：</td>
            <td class="column" colspan="4" style="text-align: left;border-top: none;width: 40%">{{formList.totalAmount?dealBigMoney(formList.totalAmount):''}}</td>
          </tr>
          <tr>
            <td class="column" style="width: 15%;border: none">财务：</td>
            <td class="column" colspan="2" style="text-align: left;border: none;width: 18%"></td>
            <td class="column" style="width: 15%;border: none">部门经理：</td>
            <td class="column" colspan="2" style="text-align: left;border: none;width: 18%"></td>
            <td class="column" style="width: 15%;border: none">总经理：</td>
            <td class="column" colspan="2" style="text-align: left;border: none;width: 18%"></td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Printing">打印</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { select } from '@/api/system/set'
import {
  listQuery,
  submit,
  viewSingle,
  deleteQuery,
  productName,
  queryItem,
  company,
  warehouse,
  listDelete,
  tableDeleteQuery,
  confirmDeletion,
  pleaseCheck,
  copyNew,
  revoke,
  withdrawBy,
  getName,
  queryUserVal, feesList, corpsList
} from '@/api/costManagement/index'
import Cookies from 'js-cookie'
import Global from '@/layout/components/global'
import moment from 'moment'
import { listDept, treeselect } from '@/api/system/dept'
import { getliable } from '@/api/project'
import cUpload from  '@/components/cUpload/index.vue'

export default {
  name: 'index',
  components:{
    cUpload
  },
  data() {
    return {
      before: '',
      lander: '',
      operator: '',
      disabled: true,
      forward: false,
      backward: false,
      addOrUpdateVisible: false,
      addOrUpdateVisib: false,
      total: 0,
      selection: [],
      formDataList: {
        fBilltype: 'FY',
        pageSize: 10,
        pageNum: 1
      },
      formList: {},
      tatolLabel: ['金额'],
      dialogVisible: false,
      listData: {
        itemExpenseId: [],
        businessType: [],
        expenseType: [],
        expenseId: [],
        belongsProjectId: [],
        departmentId:[],
        personnelId:[]
      },
      hasPermi: {
        lookup: ['anpin:management:query'],
        disappear: ['anpin:management:remove']
      },
      setTimeout: '',
      searchWhether: true,
      pageDisplay: true,
      dataList: {
        itemExpenseId: [],
        businessType: [],
        expenseType: [],
        createDept: [],
        itemPersonnel: [],
        createById: [],
        itemDepartment: []
      },
      tEnclosure:[],
      contentList: [],
      inDex: 4,
      tableData: [],
      tableList: [],
      isItHidden: true,
      listStyle: [
        {
          surface: '1',
          label: 'serialNumber',
          name: '序号',
          checked: 0,
          width: 100,
          onabort: ''
        }, {
          surface: '2',
          label: 'deptName',
          name: '部门',
          checked: 0,
          width: 100,
          onabort: ''
        }, {
          surface: '3',
          label: 'createBy',
          name: '制单人',
          checked: 0,
          width: 100,
          onabort: ''
        }, {
          surface: '4',
          label: 'createDeptName',
          name: '制单部门',
          checked: 0,
          width: 100,
          onabort: ''
        }, {
          surface: '5',
          label: 'businessTime',
          name: '业务日期',
          checked: 0,
          width: 100,
          onabort: ''
        }, {
          surface: '6',
          label: 'createTime',
          name: '制单日期',
          checked: 0,
          width: 100,
          onabort: ''
        }, {
          surface: '7',
          label: 'totalAmount',
          name: '金额合计',
          checked: 0,
          width: 100,
          onabort: ''
        },
        {
          surface: '8',
          label: 'remark',
          name: '备注',
          checked: 0,
          width: 100,
          onabort: ''
        },
        {
          surface: '9',
          label: 'operation',
          name: '操作',
          checked: 0,
          width: 160,
          fixed: 'right',
          operation: '1',
          onabort: ''
        }
      ],
      contentStyle: [
        {
          surface: '1',
          label: 'serialNumber',
          name: '序号',
          checked: 0,
          width: 100,
          disabled: false,
          onabort: ''
        }, {
          surface: '2',
          label: 'expenseId',
          name: '费用名称',
          checked: 0,
          width: 160,
          onabort: '',
          disabled: false,
          changeable: 1
        }, {
          surface: '3',
          label: 'amount',
          name: '金额',
          checked: 0,
          width: 120,
          disabled: false,
          onabort: 'this.value=this.value.replace(/[^\\-?\\d.]/g,"").replace(/^(\\-)*(\\d+)\\.(\\d\\d).*$/, "$1$2.$3")',
          changeable: 2
        }, {
          surface: '4',
          label: 'belongsProjectId',
          name: '项目',
          checked: 0,
          width: 200,
          onabort: '',
          disabled: false,
          changeable: 1
        }, {
          surface: '5',
          label: 'personnelId',
          name: '所属人员',
          checked: 0,
          width: 120,
          onabort: 'this.value=this.value.replace(/[^\\-?\\d.]/g,"").replace(/^(\\-)*(\\d+)\\.(\\d\\d).*$/, "$1$2.$3")',
          disabled: false,
          changeable: 1
        }, {
          surface: '6',
          label: 'departmentId',
          name: '所属部门',
          checked: 0,
          width: 200,
          onabort: '',
          disabled: false,
          changeable: 1
        }, {
          surface: '7',
          label: 'matterName',
          name: '物料',
          checked: 0,
          width: 100,
          disabled: false,
          changeable: 2
        }, {
          surface: '8',
          label: 'remark',
          name: '备注',
          checked: 0,
          width: 100,
          onabort: '',
          disabled: false,
          changeable: 2
        }, {
          surface: '9',
          label: 'operation',
          name: '操作',
          checked: 0,
          disabled: false,
          width: 160,
          fixed: 'right',
          operation: '2',
          onabort: ''
        }
      ],
      queryList: {
        tableName: '费用管理',
        columnList: []
      },
      purchaseList: {
        tableName: '费用管理详情',
        columnList: []
      },
      setRowList: [],
      customButton: [
        {
          type: 'primary',
          size: 'mini',
          icon: 'el-icon-edit',
          name: '新单',
          disabled: false
        },
        // {
        //   type:'warning',
        //   size:'mini',
        //   icon:'el-icon-edit',
        //   name:'立即修改',
        //   disabled:false,
        // },
        //主页列表按钮
        // {
        //   type: 'warning',
        //   size: 'mini',
        //   icon: 'el-icon-upload2',
        //   name: '导出',
        //   disabled: false,
        //   hasPermi: ['anpin:stockControl:export']
        // },
        {
          type: 'success',
          size: 'mini',
          icon: 'el-icon-c-scale-to-original',
          name: '复制新单',
          disabled: false
        }
      ],
      contentButton: [
        {
          type: 'primary',
          size: 'mini',
          icon: 'el-icon-plus',
          name: '录入明细',
          disabled: false
        }, {
          type: 'primary',
          size: 'mini',
          icon: 'el-icon-check',
          name: '保存',
          plain: true,
          disabled: false
        }
        // , {
        //   type: 'primary',
        //   size: 'mini',
        //   icon: 'el-icon-edit-outline',
        //   name: '请核',
        //   disabled: false
        // }
        , {
          type: 'primary',
          size: 'mini',
          icon: 'el-icon-plus',
          name: '新单',
          nameTwo: '详情页',
          plain: true,
          disabled: false
        }, {
          type: 'primary',
          size: 'mini',
          icon: 'el-icon-plus',
          name: '复制新单',
          nameTwo: '详情页',
          plain: true,
          disabled: false
        }, {
          type: 'success',
          size: 'mini',
          icon: 'el-icon-edit',
          name: '修改',
          disabled: false
        }
        // , {
        //   type: 'warning',
        //   size: 'mini',
        //   icon: 'el-icon-download',
        //   name: '导出',
        //   disabled: false
        // }
        , {
          type: 'info',
          size: 'mini',
          icon: 'el-icon-edit-outline',
          name: '打印',
          disabled: false
        }
        // , {
        //   type: 'primary',
        //   size: 'mini',
        //   icon: 'el-icon-edit-outline',
        //   name: '查看审批',
        //   disabled: false
        // }
      ],
      formOption: [
        {
          span: 6,
          label: 'deptId',
          name: '部门',
          inputType: 8,
          width: 200,
          labelSize: '80',
          rules: [{ required: false, message: ' ' }]
        }, {
          span: 6,
          label: 'businessTimeList',
          name: '业务日期',
          inputType: 3,
          width: 300,
          labelSize: '80',
          rules: [{ required: false, message: ' ' }]
        }, {
          span: 6,
          label: 'createDept',
          name: '制单部门',
          inputType: 1,
          width: 200,
          labelSize: '80',
          rules: [{ required: false, message: ' ' }]
        }, {
          span: 6,
          label: 'createById',
          name: '制单人',
          inputType: 1,
          width: 200,
          labelSize: '80',
          rules: [{ required: false, message: ' ' }]
        }, {
          span: 6,
          label: 'itemExpenseId',
          name: '费用名称',
          inputType: 1,
          width: 200,
          labelSize: '80',
          rules: [{ required: false, message: ' ' }]
        }, {
          span: 6,
          label: 'itemDepartment',
          name: '所属部门',
          inputType: 1,
          width: 200,
          labelSize: '80',
          rules: [{ required: false, message: ' ' }]
        }, {
          span: 6,
          label: 'itemPersonnel',
          name: '所属人员',
          inputType: 1,
          width: 200,
          labelSize: '80',
          rules: [{ required: false, message: ' ' }]
        }, {
          span: 6,
          label: 'itemMatterName',
          name: '物料',
          inputType: 2,
          width: 200,
          labelSize: '80',
          rules: [{ required: false, message: ' ' }]
        }, {
          span: 6,
          label: 'remark',
          name: '备注',
          inputType: 4,
          width: 200,
          labelSize: '80',
          rules: [{ required: false, message: ' ' }]
        }
      ],
      contentOption: [
        {
          index: '1',
          span: 6,
          label: 'deptId',
          name: '部门',
          inputType: 8,
          width: 200,
          disabled: true,
          labelSize: '80',
          rules: [{ required: true, message: ' ' }]
        }, {
          index: '2',
          span: 6,
          label: 'businessTime',
          name: '业务日期',
          inputType: 6,
          width: 200,
          disabled: true,
          labelSize: '80',
          rules: [{ required: true, message: ' ' }]
        }, {
          index: '3',
          span: 6,
          label: 'businessType',
          name: '业务类型',
          inputType: 1,
          width: 200,
          disabled: true,
          labelSize: '80',
          rules: [{ required: true, message: ' ' }]
        }, {
          index: '4',
          span: 6,
          label: 'expenseType',
          name: '报销方式',
          inputType: 1,
          width: 200,
          disabled: true,
          labelSize: '80',
          rules: [{ required: true, message: ' ' }]
        }, {
          index: '5',
          span: 6,
          label: 'createBy',
          name: '制单人',
          inputType: 2,
          width: 200,
          labelSize: '80',
          disabled: true
        }, {
          index: '6',
          span: 6,
          label: 'createDeptName',
          name: '制单部门',
          inputType: 2,
          width: 200,
          disabled: true,
          labelSize: '80'
        }, {
          index: '7',
          span: 6,
          label: 'createTime',
          name: '制单日期',
          inputType: 6,
          width: 200,
          disabled: true,
          labelSize: '80'
        }, {
          index: '8',
          span: 6,
          label: 'totalAmount',
          name: '金额合计',
          inputType: 2,
          width: 200,
          disabled: true,
          labelSize: '80'
        },
        {
          index: '9',
          span: 6,
          label: 'remark',
          name: '备注',
          inputType: 4,
          width: 200,
          disabled: true,
          labelSize: '80'
        }
      ],
      pendingPage: ''
    }
  },
  activated() {
    if (this.$route.query.list) {
      this.pendingPage = JSON.parse(this.$route.query.list)
      this.homePage()
    }
  },
  created() {
    //获取登陆人
    queryUserVal().then((response) => {
      this.lander = response.user.userName
    })
    let data = {
      tableName: this.queryList.tableName,
      userId: Cookies.get('userName')
    }
    let y = moment(Date.parse(new Date())).format('YYYY-MM-DD')
    // this.$set(this.formDataList, 'timeInterval', [y + ' 00:00:00', y + ' 23:59:59'])
    this.getRow(data)
    this.query(this.formDataList)
    treeselect().then(response => {
      this.dataList.deptId = response.data
    })
    listDept().then(res => {
      for (let item in res.data) {
        this.listData.departmentId.push({
          label: res.data[item].deptName,
          value: JSON.parse(res.data[item].deptId)
        })
        this.dataList.createDept.push({
          label: res.data[item].deptName,
          value: JSON.parse(res.data[item].deptId)
        })
        this.dataList.itemDepartment.push({
          label: res.data[item].deptName,
          value: JSON.parse(res.data[item].deptId)
        })
      }
    })
    getliable().then((res) => {
      for (let item in res.rows) {
        this.listData.personnelId.push({
          label: res.rows[item].userName,
          value: res.rows[item].userId,
        });
        this.dataList.itemPersonnel.push({
          label: res.rows[item].userName,
          value: res.rows[item].userId,
        });
        this.dataList.createById.push({
          label: res.rows[item].userName,
          value: res.rows[item].userId,
        });
      }
    });
    corpsList({ fTypeid: 205 }).then(res => {
      for (let item in res.rows) {
        this.listData.belongsProjectId.push({
          label: res.rows[item].fName,
          value: JSON.parse(res.rows[item].fId)
        })
      }
    })
    feesList().then(res => {
      for (let item in res.data) {
        this.listData.expenseId.push({
          label: res.data[item].fName,
          value: JSON.parse(res.data[item].fId)
        })
        this.dataList.itemExpenseId.push({
          label: res.data[item].fName,
          value: JSON.parse(res.data[item].fId)
        })
      }
    })
    this.getDicts('expense_business_type').then(res => {
      for (let item in res.data) {
        this.dataList.businessType.push({
          label: res.data[item].dictLabel,
          value: res.data[item].dictValue
        })
      }
    })
    this.getDicts('reimbursement_method').then(res => {
      for (let item in res.data) {
        this.dataList.expenseType.push({
          label: res.data[item].dictLabel,
          value: res.data[item].dictValue
        })
      }
    })
  },
  methods: {
    /** 数字金额大写转换(可以处理整数,小数,负数) */
    dealBigMoney(n){
      let fraction = ['角', '分'];
      let digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
      let unit = [ ['元', '万', '亿'], ['', '拾', '佰', '仟']  ];
      let head = n < 0? '欠': '';
      n = Math.abs(n);
      let s = '';
      for (let i = 0; i < fraction.length; i++){
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
      }
      s = s || '整';
      n = Math.floor(n);
      for (let i = 0; i < unit[0].length && n > 0; i++){
        let p = '';
        for (let j = 0; j < unit[1].length && n > 0; j++){
          p = digit[n % 10] + unit[1][j] + p;
          n = Math.floor(n / 10);
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零')  + unit[0][i] + s;
      }
      return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
    },
    change(scope) {
      for (let item in this.contentList) {
        for (let li in this.listData.fFeeid) {
          if (this.contentList[item].fFeeid == this.listData.fFeeid[li].value) {
            this.$set(this.contentList[item], 'fFeeunitid', this.listData.fFeeid[li].fFeeunitid)
            this.$set(this.contentList[item], 'fCurrencyName', this.listData.fFeeid[li].fCurrency)
          }
        }
      }
    },
    homePage() {
      let date = this.$route.query
      if (this.$route.query.list) {
        // this.contentButton = this.$options.data().contentButton
        // this.contentButton.push(JSON.parse(this.$route.query.list))
        let scope = {
          row: {
            fId: JSON.parse(this.$route.query.data).billId
          }
        }
        this.viewMethod(scope)
      } else {
        this.pageDisplay = true
      }
    },
    // 查看审批流
    getDataList() {
      this.addOrUpdateVisible = false
    },
    returnData() {
      this.addOrUpdateVisib = false
      this.open = false
      this.cancelTwo()
    },
    sequence(res) {
      // let i = 0
      // for ( i ; i <= this.tableData.length;i++){
      //   if (this.$refs.avatar.form.fId == this.tableData[i].fId) {
      //     console.log(i)
      //     if (i >= 0) this.forward = true
      //     if (this.tableData.length != Number(i+1)) this.backward = false
      //     if (i !== 0){
      //       console.log(this.tableData[--i].fId)
      //     }
      //     return
      //   }
      // }
      // if (res === true){
      //
      // }
    },
    addOrUpdateHandle() {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(this.$refs.avatar.form.fId, 520)
      })
    },
    addOrUpdateHand() {
      this.addOrUpdateVisib = true
      this.$nextTick(() => {
        this.$refs.ApprovalComments.init(this.$refs.avatar.form.fId, 520)
      })
    },
    //首页审批跳转关闭返回首页
    cancelTwo() {
      let view = {}
      if (this.pendingPage.pendingPage) {
        view = {
          fullPath: '/morePage/stock?open=true',
          hash: '',
          matched: Array(2),
          meta: Object,
          name: 'MorePage/stock',
          params: Object,
          path: '/morePage/stock',
          query: Object,
          title: '待审数据'
        }
        this.$router.push({ path: '/morePage/stock' })
      } else {
        view = {
          fullPath: '/purchaseRequest',
          hash: '',
          matched: Array(2),
          meta: Object,
          name: 'PurchaseRequest',
          params: Object,
          path: '/purchaseRequest',
          query: Object,
          title: '采购申请'
        }
        this.$router.push({ path: '/index' })
      }
      this.$store
        .dispatch('tagsView/delView', view)
        .then(({ visitedViews }) => {
          if (this.isActive(view)) {
            this.toLastView(visitedViews, view)
          }
        })
      Global.$emit('removeCache', 'closeSelectedTag', view)
    },
    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.formDataList.pageSize = val
      this.query(this.formDataList)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.formDataList.pageNum = val
      this.query(this.formDataList)
    },
    //计算金额
    totalAmount(scope, item,data) {
      if (item.label === 'amount') {
        let amount = 0
        for (let item of data){
          amount += item.amount?Number(item.amount):0
        }
        this.$set(this.$refs.avatar.form, 'totalAmount', amount.toFixed(2))
      }
    },
    //查询主页列数据
    query(data) {
      console.log(data)
      listQuery(data).then(res => {
        this.tableData = res.rows
        this.total = res.total
      })
      this.tEnclosure = []
      this.disabled = true
    },
    //查询列数据
    getRow(data, list, add, i) {
      console.log(data, list, add)
      select(data).then((res) => {
        this.$refs.avatar.form = {}
        if (data.tableName === '费用管理详情') {
          if (res.data.length != 0) {
            this.purchaseList.columnList = res.data.filter((e) => e.checked == 0)
            this.purchaseList.columnList = res.data
            this.setRowList = res.data
            this.purchaseList.columnList = this.purchaseList.columnList.filter((e) => e.checked == 0)
            // this.waitFor = true

          } else {
            this.$set(this.purchaseList, 'columnList', this.$options.data().contentStyle)
            this.setRowList = this.$options.data().contentStyle
          }
          if (add) {
            this.purchaseList.columnList.forEach(item => item.disabled = false)
            this.disabled = false
          } else {
            this.purchaseList.columnList.forEach(item => item.disabled = true)
          }
          this.pageDisplay = false
          this.isItHidden = false
          this.inDex = this.contentOption.length
        } else {
          if (res.data.length != 0) {
            this.queryList.columnList = res.data.filter((e) => e.checked == 0)
            this.queryList.columnList = res.data
            this.setRowList = res.data
            this.queryList.columnList = this.queryList.columnList.filter((e) => e.checked == 0)
            // this.waitFor = true
          } else {
            this.$set(this.queryList, 'columnList', this.$options.data().listStyle)
            this.setRowList = this.$options.data().listStyle
          }
          this.pageDisplay = true
          this.isItHidden = true
          this.inDex = 4
          this.$refs.avatar.assignmentTime(this.formDataList)
        }
        if (list) {
          this.$refs.avatar.form = list.tCostManagement
          this.contentList = list.tCostManagementItem
          this.contentButton = this.$options.data().contentButton
          this.tEnclosure = list.tEnclosure
          if (this.pendingPage.name) {
            this.contentButton.push(JSON.parse(this.$route.query.list))
            if (JSON.parse(this.$route.query.list)) this.$router.push({ query: {} })
          }
          let data = {
            actId: 520,
            id: this.$refs.avatar.form.fId
          }
          getName(data).then(response => {
            console.log(response)
            if (response.data.length != 0) {
              this.before = response.data[0].userName
              if (this.$refs.avatar.form.fBillstatus === 6 && this.before == this.lander) {
                // this.contentButton.forEach(item =>{
                //   if (item.name === '审批'){
                //
                //   }
                // })
                // this.contentButton.push({
                //   type: 'danger',
                //   size: 'mini',
                //   icon: 'el-icon-edit-outline',
                //   name: '撤销采购',
                //   disabled: false
                // })
              }
            }
          })
          let operator = this.$refs.avatar.form.createBy
          // if (this.$refs.avatar.form.fBillstatus === 4 && this.lander === operator) {
          //   this.contentButton.push({
          //     type: 'danger',
          //     size: 'mini',
          //     icon: 'el-icon-edit-outline',
          //     name: '撤销审批',
          //     disabled: false
          //   })
          // }
          this.contentButton.forEach(item => {
            if (this.$refs.avatar.form.fBillstatus < 4) {
              if (item.name == '录入明细' || item.name == '保存') {
                item.disabled = true
              } else {
                item.disabled = false
              }
            }else {
              if (item.name == '修改' || item.name == '打印') {
                item.disabled = false
              } else {
                item.disabled = true
              }
            }
          })
        }
        if (i == 1) this.submitAnd()
      })
    },
    returnToForm(row) {
      console.log(row, 111)
    },
    //查看-列表
    viewMethod(scope, res, i) {
      if (res) {
        this.contentButton.forEach(item => {
          item.disabled = false
          this.purchaseList.columnList.forEach(item => item.disabled = false)
          this.contentStyle.forEach(item => item.disabled = false)
          this.contentOption.forEach(item => {
            if (item.label == 'createDeptName' || item.label == 'createBy' || item.label == 'createTime' || item.label == 'totalAmount') {
              item.disabled = true
            } else {
              item.disabled = false
            }
          })
        })
      } else {
        this.contentOption.forEach(item => item.disabled = true)
        this.contentStyle.forEach(item => item.disabled = true)
      }
      viewSingle(scope.row.fId).then(res => {
        if (res.code === 200) {
          let data = {
            tableName: this.purchaseList.tableName,
            userId: Cookies.get('userName')
          }
          let list = {
            tCostManagement: res.data.tCostManagement,
            tCostManagementItem: res.data.tCostManagementItem,
            tEnclosure:res.data.tEnclosure
          }
          // this.$refs.avatar.form = {}
          this.getRow(data, list, '', i)
        }
      })
    },
    submitAnd() {
      this.$refs.avatar.form.fId = ''
      this.$refs.avatar.form.fBillno = ''
      this.$refs.avatar.form.fCreateLog = ''
      this.$refs.avatar.form.fPrintLog = ''
      this.$refs.avatar.form.fReviewDate = ''
      this.$refs.avatar.form.fBillstatus = 2
      this.$refs.avatar.form.fPrint = 0
      this.contentList.forEach(item => item.fId = '')
      this.contentOption.forEach(item => {
        if (item.label == 'createDeptName' || item.label == 'createBy' || item.label == 'createTime' || item.label == 'totalAmount') {
          item.disabled = true
        } else {
          item.disabled = false
        }
      })
      this.purchaseList.columnList.forEach(item => item.disabled = false)
      this.contentButton.forEach(item => item.disabled = false)
      this.contentStyle.forEach(item => item.disabled = false)
    },
    //修改
    modification(scope) {
      console.log(scope)
    },
    //删除
    deletion(scope) {
      console.log(scope.row.fId)
      // tableDeleteQuery(scope.row.fId).then(res => {
      //
      // })
      // this.$confirm(res.msg == 1 ? '主表数据为空' : (res.msg == 2 ? '主表有数据' : '未知状态') + '是否永久删除该条数据?', '提示', {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        confirmDeletion(scope.row.fId).then(data => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.query(this.formDataList)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    //选择框
    selectionbox(selection) {
      if (selection.length > 1) {
        this.customButton.forEach(item => {
          if (item.name === '复制新单') {
            item.disabled = true
          } else {
            item.disabled = false
          }
        })
      } else {
        this.customButton.forEach(item => item.disabled = false)
        this.selection = selection
      }
    },
    //详情内容保存
    submitAndSave(item, res) {
      // if (this.$refs.avatar.form.fBillstatus <= 4 || this.$refs.avatar.form.fBillstatus > 5 || !this.$refs.avatar.form.fBillstatus) {
        let formData = new window.FormData()
        this.$refs.avatar.form.fMoney = 0
        this.contentList.forEach(item => this.$refs.avatar.form.fMoney += Number(item.fAmount))
        formData.append('tCostManagement', JSON.stringify(this.$refs.avatar.form))
        formData.append('tCostManagementItem', JSON.stringify(this.contentList))
        formData.append('tEnclosure', JSON.stringify(this.tEnclosure))
        formData.append('fBilltype', 'FY')
        if (item === 3) {
          this.$refs.avatar.form.fId = ''
          this.$refs.avatar.form.fBillno = ''
          this.$refs.avatar.form.fCreateLog = ''
          this.$refs.avatar.form.fPrintLog = ''
          this.$refs.avatar.form.fBillstatus = 2
          this.$refs.avatar.form.fPrint = 0
          this.contentList.forEach(item => item.fId = '')
          this.tEnclosure = []
          this.contentOption.forEach(item => {
            if (item.label == 'createDeptName' || item.label == 'createBy' || item.label == 'createTime' || item.label == 'totalAmount') {
              item.disabled = true
            } else {
              item.disabled = false
            }
          })
          this.disabled = false
          this.$message.success("操作成功")
          this.purchaseList.columnList.forEach(item => item.disabled = false)
          this.contentButton.forEach(item => item.disabled = false)
          this.contentStyle.forEach(item => item.disabled = false)
        } else {
          submit(formData).then(res => {
            if (res.code == 200) {
              if (res) {
                this.$refs.avatar.form = res.data.tCostManagement
              }
              this.contentList = res.data.tCostManagementItem
              this.tEnclosure = res.data.tEnclosure
              this.$message.success('保存成功')
              viewSingle(this.$refs.avatar.form.fId).then(res => {
                if (res.code === 200) {
                  let list = {
                    tCostManagement: res.data.tCostManagement,
                    tCostManagementItem: res.data.tCostManagementItem,
                    tEnclosure: res.data.tEnclosure
                  }
                  this.$refs.avatar.form = list.tCostManagement
                  this.contentList = list.tCostManagementItem
                  this.tEnclosure = list.tEnclosure
                }
              })
            }
          })
        }
      // }
      if (item == 1) {
        this.dialogVisible = true
      } else if (item === 2) {
        let data = {
          tableName: this.queryList.tableName,
          userId: Cookies.get('userName')
        }
        this.getRow(data)
        this.query(this.formDataList)
      }
      if (item === 3 && this.$refs.avatar.form.fBillstatus > 3) {
        this.$refs.avatar.form.fId = ''
        this.$refs.avatar.form.fBillno = ''
        this.$refs.avatar.form.fCreateLog = ''
        this.$refs.avatar.form.fReviewDate = ''
        this.$refs.avatar.form.fReviewDate = ''
        this.$refs.avatar.form.fPrintLog = ''
        this.$refs.avatar.form.fBillstatus = 2
        this.$refs.avatar.form.fPrint = 0
        this.contentList.forEach(item => item.fId = '')
        this.contentOption.forEach(item => {
          if (item.label == 'createDeptName' || item.label == 'createBy' || item.label == 'createTime' || item.label == 'totalAmount') {
            item.disabled = true
          } else {
            item.disabled = false
          }
        })
        this.purchaseList.columnList.forEach(item => item.disabled = false)
        this.contentButton.forEach(item => item.disabled = false)
        this.contentStyle.forEach(item => item.disabled = false)
        // let datae = {
        //   fId:this.$refs.avatar.form.fId,
        //   fBilltype:'FY'
        // }
        // copyNew(datae).then(res=> {
        //   this.$message({
        //     message: '复制新单成功',
        //     type: 'success',
        //     showClose: true
        //   });
        //   let scope = {
        //     row: {
        //       fId: res.data
        //     }
        //   }
        //   this.query(this.formDataList)
        //   this.viewMethod(scope,res)
        // })
      }
    },
    //表单选中后触发
    selectTrigger(name, list, id) {
      console.log(list, id)
      if (name == 'fGoodsid') {
        for (let item in list) {
          if (list[item].value == id) {
            this.$refs.avatar.form.personNaem = list[item].personNaem
            this.$refs.avatar.form.corpsName = list[item].corpsName
          }
        }
      }
    },
    //确认打印
    Printing() {
      this.$print(this.$refs.print)
    },
    //返回列表
    backToList() {
      let data
      if (!this.$refs.avatar.form.fId && this.contentList !== 0 || this.$refs.avatar.form.fBillstatus > 3 && !this.$route.query.data) {
        data = {
          tableName: this.queryList.tableName,
          userId: Cookies.get('userName')
        }
        this.getRow(data)
        this.query(this.formDataList)
      } else if (this.$route.query.data) {
        this.cancelTwo()
        // this.$router.push({path:'/index'})
      } else {
        this.$confirm('当前数据是否保存?', '提示', {
          confirmButtonText: '保存',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.submitAndSave(2, 1)
        }).catch(() => {
          data = {
            tableName: this.queryList.tableName,
            userId: Cookies.get('userName')
          }
          this.getRow(data)
          this.query(this.formDataList)
        })
      }
    },
    //所有按钮
    buttonList(row) {
      console.log(row)
      let data
      switch (row.name) {
        case '新单':
          if (row.nameTwo == '详情页') {
            if (this.$refs.avatar.form.fId) {
              this.contentList = []
              data = {
                tableName: this.purchaseList.tableName,
                userId: Cookies.get('userName')
              }
              this.$refs.avatar.form = {}
              this.getRow(data, '', 1)
              this.contentOption.forEach(item => {
                if (item.label == 'createDeptName' || item.label == 'createBy' || item.label == 'createTime' || item.label == 'totalAmount') {
                  item.disabled = true
                } else {
                  item.disabled = false
                }
              })
              this.contentButton.forEach(item => item.disabled = false)
              this.contentStyle.forEach(item => item.disabled = false)
              this.tEnclosure = []
              // this.$set(this,'tEnclosure',[])
              this.$refs.avatar.clearVerification()
              this.$refs.avatar.form.createBy = Cookies.get('userName')
            } else {
              this.$message.error('当前数据未保存，请先保存')
            }
          } else {
            this.contentList = []
            data = {
              tableName: this.purchaseList.tableName,
              userId: Cookies.get('userName')
            }
            this.$refs.avatar.form = {}
            this.getRow(data, '', 1)
            //点击列表新单控制主表是否需要禁用项
            this.contentOption.forEach(item => {
              if (item.label == 'createDeptName' || item.label == 'createBy' || item.label == 'createTime' || item.label == 'totalAmount') {
                item.disabled = true
              } else {
                item.disabled = false
              }
            })
            this.contentButton.forEach(item => item.disabled = false)
            this.contentStyle.forEach(item => item.disabled = false)
            this.tEnclosure = []
            this.$refs.avatar.clearVerification()
            this.$refs.avatar.form.createBy = Cookies.get('userName')
          }
          break
        case '保存':
          this.$refs.avatar.submitForm('submit')
          break
        case '打印':
          console.log(this.listData.fFeeid, this.contentList)
          for (let item in this.contentList) {
            for (let li in this.listData.fFeeid) {
              if (this.contentList[item].fFeeid == this.listData.fFeeid[li].value) {
                this.contentList[item].feeName = this.listData.fFeeid[li].label
              }
            }
            for (let i in this.listData.fFeeunitid) {
              if (this.contentList[item].fFeeunitid == this.listData.fFeeunitid[i].value) {
                this.contentList[item].fFeeunitName = this.listData.fFeeunitid[i].label
              }
            }
          }
          if (!this.$refs.avatar.form.fId) {
            this.$message.error('未保存，不允许打印')
          } else if (this.$refs.avatar.form.fBillstatus >= 4) {
            this.formList = this.$refs.avatar.form
            this.dialogVisible = true
          } else {
            this.formList = this.$refs.avatar.form
            console.log(this.$refs.avatar.form.fBillstatus)
            this.submitAndSave(1)
          }
          break
        case '修改':
          this.contentButton.forEach(item => {
            if (this.$refs.avatar.form.fBillstatus == 6) {
              if (item.name === '返回列表' || item.name == '打印' || item.name === '修改' || item.name === '查看审批' || item.name === '审批' || item.name === '撤销采购' || item.name === '撤销审批' || item.name === '保存') {
                item.disabled = false
              } else {
                item.disabled = true
              }
              this.contentStyle.forEach(item => {
                if (item.label == 'fUnitprice' || item.label == 'fQty' || item.label == 'fAmount' || item.label == 'remark') {
                  item.disabled = false
                } else {
                  item.disabled = true
                }
              })
              this.purchaseList.columnList.forEach(item => {
                if (item.label == 'fUnitprice' || item.label == 'fQty' || item.label == 'fAmount' || item.label == 'remark') {
                  item.disabled = false
                } else {
                  item.disabled = true
                }
              })
            } else if (this.$refs.avatar.form.fBillstatus >= 4) {
              if (item.name === '返回列表' || item.name == '打印' || item.name === '修改' || item.name === '查看审批' || item.name === '审批' || item.name === '撤销采购' || item.name === '撤销审批' || item.name === '保存') {
                item.disabled = false
              } else {
                item.disabled = true
              }
            } else {
              item.disabled = false
              this.purchaseList.columnList.forEach(item => item.disabled = false)
              this.contentStyle.forEach(item => item.disabled = false)
              this.contentOption.forEach(item => {
                if (item.label == 'createDeptName' || item.label == 'createBy' || item.label == 'createTime' || item.label == 'totalAmount') {
                  item.disabled = true
                } else {
                  item.disabled = false
                }
              })
            }
          })
          this.disabled = false
          break
        case '录入明细':
          this.contentList.push({
            fFeeid: '',
            fPurchase: '',
            fFeeunitid: '',
            fStltypeid: '',
            remark: '',
            createTime: 0,
            fAmount: 0,
            fQty: 0,
            fUnitprice: 0,
            createBy: Cookies.get('userName'),
            fReviewDate: '',
            operation: ''
          })
          break
        case '查看审批':
          this.addOrUpdateHandle()
          break
        case '审批':
          this.addOrUpdateHand()
          break
        case '请核':
          if (this.$refs.avatar.form.fBillstatus < 4) {
            this.$refs.avatar.submitForm('check')
          } else {
            this.$message.error('请先保存')
          }
          break
        case '复制新单':
          if (row.nameTwo === '详情页') {
            this.$refs.avatar.submitForm('submit', 3)
          } else {
            if (this.selection.length > 0) {
              let scope = {
                row: {
                  fId: this.selection[0].fId
                }
              }
              this.query(this.formDataList)
              this.viewMethod(scope, '', 1)
            } else {
              this.$message.warning('未选择列表，请选择后再点击')
            }
          }
          break
        case '撤销审批':
          let date = new Date()
          let y = date.getFullYear()
          let m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
          let d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
          data = {
            actId: 520,
            id: this.$refs.avatar.form.fId,
            billId: this.$refs.avatar.form.fId,
            auditItem: y + '-' + m + '-' + d
          }
          console.log(data)
          revoke(data).then(res => {
            if (res.code === 200) {
              this.$message({
                showClose: true,
                message: '撤销成功',
                type: 'success'
              })
              data = {
                tableName: this.queryList.tableName,
                userId: Cookies.get('userName')
              }
              this.getRow(data)
              this.query(this.formDataList)
            }
          })
          break
        case '撤销采购':
          if (this.$refs.avatar.form.fTakeOrders == 2) {
            this.$confirm('该订单已接单, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              withdrawBy(this.$refs.avatar.form.fId).then(res => {
                if (res.code === 200) {
                  this.$message({
                    showClose: true,
                    message: '撤销成功',
                    type: 'success'
                  })
                  data = {
                    tableName: this.queryList.tableName,
                    userId: Cookies.get('userName')
                  }
                  this.getRow(data)
                  this.query(this.formDataList)
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
          } else {
            withdrawBy(this.$refs.avatar.form.fId).then(res => {
              if (res.code === 200) {
                this.$message({
                  showClose: true,
                  message: '撤销成功',
                  type: 'success'
                })
                data = {
                  tableName: this.queryList.tableName,
                  userId: Cookies.get('userName')
                }
                this.getRow(data)
                this.query(this.formDataList)
              }
            })
          }
          break
        default:
          this.$message.error('该按钮暂无功能')
      }
    },
    //请核
    writeOff() {
      let formData = new window.FormData()
      formData.append('tWarehousebills', JSON.stringify(this.$refs.avatar.form))
      formData.append('tWarehousebillsfees', JSON.stringify(this.contentList))
      formData.append('fBilltype', 'FY')
      pleaseCheck(formData).then(res => {
        if (res.code == 200) {
          this.$message.success('请核成功')
          this.contentOption.forEach(item => item.disabled = true)
          this.contentStyle.forEach(item => item.disabled = true)
          this.contentButton.forEach(item => {
            if (item.name == '返回列表' || item.name == '修改' || item.name == '打印') {
              item.disabled = false
            } else {
              item.disabled = true
            }
          })
          // this.$refs.avatar.form = res.data.warehouseBills
          // this.contentList = res.data.tWarehousebillsCntrs
          let data = {
            tableName: this.queryList.tableName,
            userId: Cookies.get('userName')
          }
          this.getRow(data)
          this.query(this.formDataList)
        }
      })
    },
    // 显示搜索条件、点击后会调用此方法
    showSearch() {
      console.log('到我了')
      this.searchWhether = !this.searchWhether
    },
    //搜索、重置、展开
    feedback(res) {
      console.log(res)
      if (res == '展开') {
        if (this.inDex == 4) {
          this.inDex = this.formOption.length
        } else {
          this.inDex = 4
        }
      } else if (res == '搜索') {
        this.$refs.avatar.submitForm()
      } else if (res == '重置') {
        this.formDataList = {
          pageNum: 1,
          pageSize: 10,
          timeInterval: null,
          fBilltype: 'FY'
        }
        this.$refs.avatar.assignmentTime(this.formDataList)
        this.$refs.avatar.submitForm()
      }
    },
    //表单验证通过执行搜索
    submitForm() {
      let list = this.formDataList
      // console.log(this.$refs.avatar.form)
      this.formDataList = this.$refs.avatar.form
      this.formDataList.fBilltype = list.fBilltype
      this.formDataList.pageSize = list.pageSize
      this.formDataList.pageNum = list.pageNum
      // this.formDataList.timeInterval = list.timeInterval
      this.query(this.formDataList)
    },
    //点击刷新会调用此方法
    getList() {
      this.feedback('重置')
      this.submitForm()
      console.log('到我了2')
    },
    //详情表内容移出
    deletRows(index, rows) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (rows[index].fId) {
          listDelete(rows[index].fId).then(data => {
            rows.splice(index, 1)
            let amount = 0
            for (let item of rows){
              amount += item.amount?Number(item.amount):0
            }
            this.$set(this.$refs.avatar.form, 'totalAmount', amount.toFixed(2))
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        } else {
          rows.splice(index, 1)
          let amount = 0
          for (let item of rows){
            amount += item.amount?Number(item.amount):0
          }
          this.$set(this.$refs.avatar.form, 'totalAmount', amount.toFixed(2))
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>

.table {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: transparent;
  display: table;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.table td {
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  color: #000000;
  padding: 8px 12px;
}

.column {
  border: 1px solid #000;
}

.app-container >>> .el-form-item {
  margin-bottom: 0;
}
</style>