新增住房登记,产权登记

src/views/saleManage/checkIn/checkIn.vue

@@ -0,0 +1,360 @@
+<template>
+  <div>
+    <el-row class="handle-box" style="margin-bottom: 10px">
+      <el-col :span="24">
+        <span>买受人&nbsp;</span>
+        <el-input v-model="search.buyerName" class="ch-input ch-input-size" placeholder="买受人" size="small" @keyup.enter.native="handleSearch()" />
+        <span style="margin-left: 20px">房屋&nbsp;</span>
+        <el-input v-model="search.houseName" class="ch-input ch-input-size" placeholder="房屋" size="small" @keyup.enter.native="handleSearch()" />
+<!--      </el-col>-->
+<!--    </el-row>-->
+<!--    <el-row class="handle-box" style="margin-bottom: 10px">-->
+<!--      <el-col :span="24" style="margin-top: 20px">-->
+        <el-button class="ch-button-warning" size="small" style="float: right" @click="handleReset()"><i class="el-icon-search" />&nbsp;重置</el-button>
+        <el-button class="ch-button" size="small" style="float: right" @click="handleSearch()"><i class="el-icon-search" />&nbsp;查询</el-button>
+      </el-col>
+    </el-row>
+    <el-row class="handle-box">
+      <el-col :span="24">
+        <el-table v-loading="loading" :data="AllData" row-class-name="g_table_row" stripe>
+          <el-table-column type="index" width="60" />
+          <el-table-column label="合同编号" prop="contractNumber" />
+          <el-table-column label="合同编号">
+            <template scope="scope">
+              <el-link :underline="false" type="primary" @click="handleView2(scope.row)">{{ scope.row.contractNumber }}</el-link>
+            </template>
+          </el-table-column>
+          <!--          <el-table-column label="网签备案号" prop="recordNumber" />-->
+          <el-table-column label="买受人" prop="buyerName" />
+          <el-table-column label="房屋" prop="houseName" />
+          <el-table-column label="入住状态" prop="statusString" />
+<!--          <el-table-column label="备注" prop="remark" />-->
+            <el-table-column label="备注" prop="remark">
+                <template scope="scope">
+                    <el-tooltip placement="bottom" effect="light">
+                        <template slot="content">
+                            <p style="max-width:900px;">{{scope.row.remark}}</p>
+                        </template>
+                        <div class="zt_css">{{scope.row.remark}}</div>
+                    </el-tooltip>
+                </template>
+            </el-table-column>
+          <el-table-column label="经办时间" prop="operateTime" />
+          <el-table-column label="经办人" prop="operater" />
+
+          <!--          <el-table-column label="实测建筑面积（㎡）" prop="actualBuildArea" width="110" />-->
+          <!--          <el-table-column label="买卖单价（㎡）" prop="housePrice" />-->
+          <!--          <el-table-column label="买受人产权份额占比" prop="buyerProportion" />-->
+          <!--          <el-table-column label="付款方式" prop="paymentMethod" />-->
+          <!--          <el-table-column label="应收房款（元）" prop="totalPrice" />-->
+          <!--          <el-table-column label="应收专项维修资金（元）" prop="maintenanceFunds" />-->
+          <!--          <el-table-column label="合同状态" prop="contractStatusStr" width="110">-->
+          <!--            <template scope="scope">-->
+          <!--              <span-->
+          <!--                :style="{'color':scope.row.contractStatusStr==='已退房'?'red':scope.row.contractStatusStr==='已签约'?'green':'gray'}"-->
+          <!--              >-->
+          <!--                {{ scope.row.contractStatusStr }}-->
+          <!--              </span>-->
+          <!--            </template>-->
+          <!--          </el-table-column>-->
+          <!--          <el-table-column label="签约日期" prop="signingDate" />-->
+          <el-table-column header-align="center" label="操作" width="180">
+            <template scope="scope">
+              <el-button size="mini" type="text" @click="handleEdit(scope.row)">状态登记</el-button>
+              <el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="table-page">
+          <el-pagination
+            :current-page.sync="currentPage"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="pageSize"
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="allpage"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </el-col>
+    </el-row>
+
+    <!--合同签约/修改-->
+    <el-dialog
+      :visible.sync="dialogVisible2"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :title="dialogTitle2"
+      width="90%"
+      top="20px"
+      class="statistic_base"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      custom-class="tagdialog"
+    >
+      <contract-add v-if="dialogVisible2" ref="contractAdd" @cancel="cancel" />
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :title="dialogTitle"
+      width="60%"
+      top="70px"
+      class="statistic_base"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      custom-class="tagdialog"
+    >
+      <el-form ref="form" :model="form" :rules="rules" style="width: 100%;padding: 5px">
+        <el-row>
+          <el-col style="padding-bottom: 0px">
+            <el-card shadow="always" style="padding: 15px 5px 5px 15px">
+
+              <el-row>
+                <el-col :span="3" class="col-txt"><span>入住状态</span></el-col>
+                <el-col :span="8" class="col-input">
+                  <el-form-item>
+                    <el-select v-model="form.status" :disabled="dialogTitle=='查看'" clearable filterable placeholder="入住状态" style="width: 100%">
+                      <el-option
+                        v-for="item in dc_data.RU_ZHU_STATUS"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <div v-if="form.status==1">
+                  <el-col :span="4" class="col-txt"><span>入住日期</span></el-col>
+                  <el-col :span="8" class="col-input">
+                    <el-form-item>
+                      <el-date-picker
+                        v-model="form.inDate"
+                        :disabled="dialogTitle=='查看'"
+                        placeholder="入住日期"
+                        style="width: 100%"
+                        type="date"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                      />
+                    </el-form-item>
+                  </el-col>
+                </div>
+              </el-row>
+              <el-row>
+                <el-col :span="3" class="col-txt"><span>备注</span></el-col>
+                <el-col :span="20" class="col-input">
+                  <el-form-item>
+                    <el-input
+                      v-model="form.remark"
+                      :readonly="dialogTitle=='查看'"
+                      :rows="4"
+                      type="textarea"
+                      maxlength="2000"
+                      show-word-limit
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row style="margin-top: 50px">
+                <el-col :span="3" class="col-txt"><span>经办时间:</span></el-col>
+                <el-col :span="20" class="col-input">
+                  <span>{{ form.operateTime }}</span>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="3" class="col-txt"><span>经办人:</span></el-col>
+                <el-col :span="20" class="col-input">
+                  <span>{{ form.operater }}</span>
+                </el-col>
+              </el-row>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button v-if="dialogTitle!='查看'" type="primary" @click="confirmSubmit()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Base from '@/views/base/base'
+import BaseData from '@/views/base/baseData'
+import contractAdd from '@/views/signingManagement/contractManagement/contractAdd.vue'
+
+export default {
+    name: 'CheckIn',
+    components: { contractAdd },
+    mixins: [Base, BaseData],
+    data() {
+        return {
+            dc_key: ['RU_ZHU_STATUS'],
+            // 列表相关
+            search: {
+            },
+            AllData: [],
+            loading: false,
+            // 弹框相关
+            dialogVisible: false,
+            rules: {},
+            form: {},
+            dialogTitle: '新增',
+            dialogVisible2: false,
+            dialogTitle2: '查看'
+        }
+    },
+    mounted() {
+        this.initDict(this.dc_key).then((res) => {
+            this.getData()
+        })
+    },
+    methods: {
+
+        getData: function() {
+            const _this = this
+            _this.loading = true
+            _this.AllData = []
+
+            this.search.pageNum = this.currentPage
+            this.search.pageSize = this.pageSize
+            this.baseRequest('list', this.search).then((res) => {
+                if (res.data.rows) {
+                    res.data.rows.forEach(function(item) {
+                        const json = _this.getItemJson(item)
+                        _this.AllData.push(json)
+                    })
+                    _this.allpage = res.data.total
+                }
+                _this.loading = false
+            }).catch((e) => {
+                // console.log(e)
+            })
+            // this.initOutData()
+        },
+        handleSearch: function() {
+            this.getData()
+        },
+        handleReset: function() {
+            for (const i in this.search) {
+                if (i !== 'pageNum' && i !== 'pageSize') {
+                    this.search[i] = ''
+                }
+            }
+            this.handleSearch()
+        },
+        getItemJson: function(item) {
+            if (!item.status) {
+                item.status = 'null'
+            }
+            if (item.contractManageId2) {
+                item.contractManageId = item.contractManageId2
+            }
+            item.statusString = this.dc_map.RU_ZHU_STATUS[item.status]
+            item.operateTime = this.$common.transDate(item.operateTime, this.$constant.DATE_PATTERN.DATE_TIME_h)
+            item.inDate = this.$common.transDate(item.inDate, this.$constant.DATE_PATTERN.DATE_TIME_h)
+
+            return item
+        },
+        /* 合同编辑*/
+        // handleEdit: function(val) {
+        //     this.dialogVisible = true
+        //     this.dialogTitle = '签约'
+        //     val.isView = false
+        //     // 新vue时调用的方法
+        //     this.$nextTick(() => {
+        //         this.$refs.contractAdd.initData(val)
+        //     })
+        // },
+        /* 合同查看*/
+        handleView2(val) {
+            this.dialogVisible2 = true
+            this.dialogTitle2 = '查看'
+            val.isView = true
+            val.id = val.contractManageId2
+            // 新vue时调用的方法
+            // console.log('val.isView',val.isView)
+            this.$nextTick(() => {
+                // console.log('val.isView',val.isView)
+                this.$refs.contractAdd.initData(val)
+            })
+        },
+        cancel: function() {
+            this.dialogVisible2 = false
+        },
+        /* 编辑*/
+        handleEdit: function(val) {
+            this.form = Object.assign({}, val)
+            this.dialogVisible = true
+            this.dialogTitle = '状态登记'
+        },
+        handleView(val) {
+            this.dialogVisible = true
+            this.dialogTitle = '查看'
+            this.form = Object.assign({}, val)
+        },
+        confirmSubmit: function() {
+            const _this = this
+
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    let soaUrl = 'edit'
+                    const extraData = {}
+                    const postData = Object.assign({}, _this.form, extraData)
+
+                    if (!this.form.id) {
+                        soaUrl = 'add'
+                    }
+                    this.opRecord(postData, soaUrl)
+                } else {
+                    // console.log('error submit!!')
+                    return false
+                }
+            })
+        },
+        baseRequest(opUrl, postData) {
+            return this.$channel.globeRequest('CheckInController', opUrl, postData, 'project')
+        }
+    }
+}
+</script>
+
+<style scoped>
+.zt_css{
+    overflow:hidden;
+    white-space: nowrap;
+    text-overflow:ellipsis;
+}
+  .ch-input .el-input__inner {
+      border-color: #32323A;
+  }
+  .ch-input-size {
+      width: 150px;
+  }
+  .ch-button {
+      border-color: #32323A;
+      background-color: #32323A;
+      color: #fff;
+  }
+  .ch-button-warning {
+      margin-left: 10px;
+      border-color: #E6A23C;
+      background-color: #E6A23C;
+      color: #fff;
+  }
+  .ch-button-export {
+      margin-left: 10px;
+      border-color: #98CC1F;
+      background-color: #98CC1F;
+      color: #fff;
+  }
+  /deep/.el-dialog__header {
+      padding: 10px 20px;
+  }
+  /deep/.el-dialog__body {
+      padding: 10px 20px;
+  }
+</style>

src/views/saleManage/propertyRegistration/propertyRegistration.vue

@@ -0,0 +1,360 @@
+<template>
+  <div>
+    <el-row class="handle-box" style="margin-bottom: 10px">
+      <el-col :span="24">
+        <span>买受人&nbsp;</span>
+        <el-input v-model="search.buyerName" class="ch-input ch-input-size" placeholder="买受人" size="small" @keyup.enter.native="handleSearch()" />
+        <span style="margin-left: 20px">房屋&nbsp;</span>
+        <el-input v-model="search.houseName" class="ch-input ch-input-size" placeholder="房屋" size="small" @keyup.enter.native="handleSearch()" />
+<!--      </el-col>-->
+<!--    </el-row>-->
+<!--    <el-row class="handle-box" style="margin-bottom: 10px">-->
+<!--      <el-col :span="24" style="margin-top: 20px">-->
+        <el-button class="ch-button-warning" size="small" style="float: right" @click="handleReset()"><i class="el-icon-search" />&nbsp;重置</el-button>
+        <el-button class="ch-button" size="small" style="float: right" @click="handleSearch()"><i class="el-icon-search" />&nbsp;查询</el-button>
+      </el-col>
+    </el-row>
+    <el-row class="handle-box">
+      <el-col :span="24">
+        <el-table v-loading="loading" :data="AllData" row-class-name="g_table_row" stripe>
+          <el-table-column type="index" width="60" />
+          <el-table-column label="合同编号" prop="contractNumber" />
+          <el-table-column label="合同编号">
+            <template scope="scope">
+              <el-link :underline="false" type="primary" @click="handleView2(scope.row)">{{ scope.row.contractNumber }}</el-link>
+            </template>
+          </el-table-column>
+          <!--          <el-table-column label="网签备案号" prop="recordNumber" />-->
+          <el-table-column label="买受人" prop="buyerName" />
+          <el-table-column label="房屋" prop="houseName" />
+          <el-table-column label="产权办理状态" prop="statusString" />
+            <el-table-column label="产权证编号" prop="propertyNum" />
+
+
+<!--          <el-table-column label="备注" prop="remark" />-->
+            <el-table-column label="备注" prop="remark" >
+                <template scope="scope">
+                    <el-tooltip placement="bottom" effect="light">
+                        <template slot="content">
+                            <p style="max-width:900px;">{{scope.row.remark}}</p>
+                        </template>
+                        <div class="zt_css">{{scope.row.remark}}</div>
+                    </el-tooltip>
+                </template>
+            </el-table-column>
+
+            <el-table-column label="经办时间" prop="operateTime" />
+          <el-table-column label="经办人" prop="operater" />
+
+          <!--          <el-table-column label="实测建筑面积（㎡）" prop="actualBuildArea" width="110" />-->
+          <!--          <el-table-column label="买卖单价（㎡）" prop="housePrice" />-->
+          <!--          <el-table-column label="买受人产权份额占比" prop="buyerProportion" />-->
+          <!--          <el-table-column label="付款方式" prop="paymentMethod" />-->
+          <!--          <el-table-column label="应收房款（元）" prop="totalPrice" />-->
+          <!--          <el-table-column label="应收专项维修资金（元）" prop="maintenanceFunds" />-->
+          <!--          <el-table-column label="合同状态" prop="contractStatusStr" width="110">-->
+          <!--            <template scope="scope">-->
+          <!--              <span-->
+          <!--                :style="{'color':scope.row.contractStatusStr==='已退房'?'red':scope.row.contractStatusStr==='已签约'?'green':'gray'}"-->
+          <!--              >-->
+          <!--                {{ scope.row.contractStatusStr }}-->
+          <!--              </span>-->
+          <!--            </template>-->
+          <!--          </el-table-column>-->
+          <!--          <el-table-column label="签约日期" prop="signingDate" />-->
+          <el-table-column header-align="center" label="操作" width="220">
+            <template scope="scope">
+              <el-button size="mini" type="text" @click="handleEdit(scope.row)">办理情况登记</el-button>
+              <el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="table-page">
+          <el-pagination
+            :current-page.sync="currentPage"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="pageSize"
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="allpage"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </el-col>
+    </el-row>
+
+    <!--合同签约/修改-->
+    <el-dialog
+      :visible.sync="dialogVisible2"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :title="dialogTitle2"
+      width="90%"
+      top="20px"
+      class="statistic_base"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      custom-class="tagdialog"
+    >
+      <contract-add v-if="dialogVisible2" ref="contractAdd" @cancel="cancel" />
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :title="dialogTitle"
+      width="60%"
+      top="70px"
+      class="statistic_base"
+      :append-to-body="true"
+      :modal-append-to-body="true"
+      custom-class="tagdialog"
+    >
+      <el-form ref="form" :model="form" :rules="rules" style="width: 100%;padding: 5px">
+        <el-row>
+          <el-col style="padding-bottom: 0px">
+            <el-card shadow="always" style="padding: 15px 5px 5px 15px">
+
+              <el-row>
+                <el-col :span="3" class="col-txt"><span>办理状态</span></el-col>
+                <el-col :span="8" class="col-input">
+                  <el-form-item>
+                    <el-select v-model="form.status" :disabled="dialogTitle=='查看'" clearable filterable placeholder="办理状态" style="width: 100%">
+                      <el-option
+                        v-for="item in dc_data.CHAN_QUAN_STATUS"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <div v-if="form.status==1">
+                  <el-col :span="4" class="col-txt"><span>产权证编号</span></el-col>
+                  <el-col :span="8" class="col-input">
+                      <el-form-item>
+                          <el-input
+                              v-model="form.propertyNum"
+                              :disabled="dialogTitle=='查看'"
+                          />
+                      </el-form-item>
+                  </el-col>
+                </div>
+              </el-row>
+              <el-row>
+                <el-col :span="3" class="col-txt"><span>备注</span></el-col>
+                <el-col :span="20" class="col-input">
+                  <el-form-item>
+                    <el-input
+                      v-model="form.remark"
+                      :readonly="dialogTitle=='查看'"
+                      :rows="4"
+                      type="textarea"
+                      maxlength="2000"
+                      show-word-limit
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row style="margin-top: 50px">
+                <el-col :span="3" class="col-txt"><span>经办时间:</span></el-col>
+                <el-col :span="20" class="col-input">
+                  <span>{{ form.operateTime }}</span>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="3" class="col-txt"><span>经办人:</span></el-col>
+                <el-col :span="20" class="col-input">
+                  <span>{{ form.operater }}</span>
+                </el-col>
+              </el-row>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button v-if="dialogTitle!='查看'" type="primary" @click="confirmSubmit()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Base from '@/views/base/base'
+import BaseData from '@/views/base/baseData'
+import contractAdd from '@/views/signingManagement/contractManagement/contractAdd.vue'
+
+export default {
+    name: 'PropertyRegistration',
+    components: { contractAdd },
+    mixins: [Base, BaseData],
+    data() {
+        return {
+            dc_key: ['CHAN_QUAN_STATUS'],
+            // 列表相关
+            search: {
+            },
+            AllData: [],
+            loading: false,
+            // 弹框相关
+            dialogVisible: false,
+            rules: {},
+            form: {},
+            dialogTitle: '新增',
+            dialogVisible2: false,
+            dialogTitle2: '查看'
+        }
+    },
+    mounted() {
+        this.initDict(this.dc_key).then((res) => {
+            this.getData()
+        })
+    },
+    methods: {
+
+        getData: function() {
+            const _this = this
+            _this.loading = true
+            _this.AllData = []
+
+            this.search.pageNum = this.currentPage
+            this.search.pageSize = this.pageSize
+            this.baseRequest('list', this.search).then((res) => {
+                if (res.data.rows) {
+                    res.data.rows.forEach(function(item) {
+                        const json = _this.getItemJson(item)
+                        _this.AllData.push(json)
+                    })
+                    _this.allpage = res.data.total
+                }
+                _this.loading = false
+            }).catch((e) => {
+                // console.log(e)
+            })
+            // this.initOutData()
+        },
+        handleSearch: function() {
+            this.getData()
+        },
+        handleReset: function() {
+            for (const i in this.search) {
+                if (i !== 'pageNum' && i !== 'pageSize') {
+                    this.search[i] = ''
+                }
+            }
+            this.handleSearch()
+        },
+        getItemJson: function(item) {
+            if (!item.status) {
+                item.status = 'null'
+            }
+            if (item.contractManageId2) {
+                item.contractManageId = item.contractManageId2
+            }
+            item.statusString = this.dc_map.CHAN_QUAN_STATUS[item.status]
+            item.operateTime = this.$common.transDate(item.operateTime, this.$constant.DATE_PATTERN.DATE_TIME_h)
+            // item.inDate = this.$common.transDate(item.inDate, this.$constant.DATE_PATTERN.DATE_TIME_h)
+
+            return item
+        },
+        /* 合同编辑*/
+        // handleEdit: function(val) {
+        //     this.dialogVisible = true
+        //     this.dialogTitle = '签约'
+        //     val.isView = false
+        //     // 新vue时调用的方法
+        //     this.$nextTick(() => {
+        //         this.$refs.contractAdd.initData(val)
+        //     })
+        // },
+        /* 合同查看*/
+        handleView2(val) {
+            this.dialogVisible2 = true
+            this.dialogTitle2 = '查看'
+            val.isView = true
+            val.id = val.contractManageId2
+            // 新vue时调用的方法
+            // console.log('val.isView',val.isView)
+            this.$nextTick(() => {
+                // console.log('val.isView',val.isView)
+                this.$refs.contractAdd.initData(val)
+            })
+        },
+        cancel: function() {
+            this.dialogVisible2 = false
+        },
+        /* 编辑*/
+        handleEdit: function(val) {
+            this.form = Object.assign({}, val)
+            this.dialogVisible = true
+            this.dialogTitle = '办理情况登记'
+        },
+        handleView(val) {
+            this.dialogVisible = true
+            this.dialogTitle = '查看'
+            this.form = Object.assign({}, val)
+        },
+        confirmSubmit: function() {
+            const _this = this
+
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    let soaUrl = 'edit'
+                    const extraData = {}
+                    const postData = Object.assign({}, _this.form, extraData)
+
+                    if (!this.form.id) {
+                        soaUrl = 'add'
+                    }
+                    this.opRecord(postData, soaUrl)
+                } else {
+                    // console.log('error submit!!')
+                    return false
+                }
+            })
+        },
+        baseRequest(opUrl, postData) {
+            return this.$channel.globeRequest('PropertyRegistrationController', opUrl, postData, 'project')
+        }
+    }
+}
+</script>
+
+<style scoped>
+.zt_css{
+    overflow:hidden;
+    white-space: nowrap;
+    text-overflow:ellipsis;
+}
+  .ch-input .el-input__inner {
+      border-color: #32323A;
+  }
+  .ch-input-size {
+      width: 150px;
+  }
+  .ch-button {
+      border-color: #32323A;
+      background-color: #32323A;
+      color: #fff;
+  }
+  .ch-button-warning {
+      margin-left: 10px;
+      border-color: #E6A23C;
+      background-color: #E6A23C;
+      color: #fff;
+  }
+  .ch-button-export {
+      margin-left: 10px;
+      border-color: #98CC1F;
+      background-color: #98CC1F;
+      color: #fff;
+  }
+  /deep/.el-dialog__header {
+      padding: 10px 20px;
+  }
+  /deep/.el-dialog__body {
+      padding: 10px 20px;
+  }
+</style>