From 68aa5e62835cc9c2f88965af2e7aadfa42f1d0a5 Mon Sep 17 00:00:00 2001
From: zhaoqifeng <cpyxrjt@163.com>
Date: Thu, 25 Aug 2022 17:46:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sys/icvaccineprarmeter-add-or-update.vue  | 663 ++++++++++++++----
 1 file changed, 542 insertions(+), 121 deletions(-)

diff --git a/src/views/modules/sys/icvaccineprarmeter-add-or-update.vue b/src/views/modules/sys/icvaccineprarmeter-add-or-update.vue
index 7de8c63af..088537fa8 100644
--- a/src/views/modules/sys/icvaccineprarmeter-add-or-update.vue
+++ b/src/views/modules/sys/icvaccineprarmeter-add-or-update.vue
@@ -1,103 +1,197 @@
 <template>
-  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
-          <el-form-item label="客户Id customer.id" prop="customerId">
-          <el-input v-model="dataForm.customerId" placeholder="客户Id customer.id"></el-input>
-      </el-form-item>
-          <el-form-item label="网格ID" prop="gridId">
-          <el-input v-model="dataForm.gridId" placeholder="网格ID"></el-input>
-      </el-form-item>
-          <el-form-item label="网格名称" prop="gridName">
-          <el-input v-model="dataForm.gridName" placeholder="网格名称"></el-input>
-      </el-form-item>
-          <el-form-item label="组织Id" prop="agencyId">
-          <el-input v-model="dataForm.agencyId" placeholder="组织Id"></el-input>
-      </el-form-item>
-          <el-form-item label="组织的pids" prop="pids">
-          <el-input v-model="dataForm.pids" placeholder="组织的pids"></el-input>
-      </el-form-item>
-          <el-form-item label="所属小区ID；" prop="villageId">
-          <el-input v-model="dataForm.villageId" placeholder="所属小区ID；"></el-input>
-      </el-form-item>
-          <el-form-item label="所属小区名称" prop="villageName">
-          <el-input v-model="dataForm.villageName" placeholder="所属小区名称"></el-input>
-      </el-form-item>
-          <el-form-item label="所属楼宇Id" prop="buildId">
-          <el-input v-model="dataForm.buildId" placeholder="所属楼宇Id"></el-input>
-      </el-form-item>
-          <el-form-item label="所属楼宇名称" prop="buildName">
-          <el-input v-model="dataForm.buildName" placeholder="所属楼宇名称"></el-input>
-      </el-form-item>
-          <el-form-item label="单元id" prop="unitId">
-          <el-input v-model="dataForm.unitId" placeholder="单元id"></el-input>
-      </el-form-item>
-          <el-form-item label="单元名" prop="unitName">
-          <el-input v-model="dataForm.unitName" placeholder="单元名"></el-input>
-      </el-form-item>
-          <el-form-item label="所属家庭Id" prop="homeId">
-          <el-input v-model="dataForm.homeId" placeholder="所属家庭Id"></el-input>
-      </el-form-item>
-          <el-form-item label="房间名" prop="homeName">
-          <el-input v-model="dataForm.homeName" placeholder="房间名"></el-input>
-      </el-form-item>
-          <el-form-item label="户口性质：0户籍 1外来" prop="householdType">
-          <el-input v-model="dataForm.householdType" placeholder="户口性质：0户籍 1外来"></el-input>
-      </el-form-item>
-          <el-form-item label="姓名" prop="name">
-          <el-input v-model="dataForm.name" placeholder="姓名"></el-input>
-      </el-form-item>
-          <el-form-item label="联系电话" prop="mobile">
-          <el-input v-model="dataForm.mobile" placeholder="联系电话"></el-input>
-      </el-form-item>
-          <el-form-item label="身份证号" prop="idCard">
-          <el-input v-model="dataForm.idCard" placeholder="身份证号"></el-input>
-      </el-form-item>
-          <el-form-item label="是否接种：0否1是" prop="isVaccination">
-          <el-input v-model="dataForm.isVaccination" placeholder="是否接种：0否1是"></el-input>
-      </el-form-item>
-          <el-form-item label="第一次接种时间" prop="firstVacTime">
-          <el-input v-model="dataForm.firstVacTime" placeholder="第一次接种时间"></el-input>
-      </el-form-item>
-          <el-form-item label="第一次接种地点" prop="firstVacSite">
-          <el-input v-model="dataForm.firstVacSite" placeholder="第一次接种地点"></el-input>
-      </el-form-item>
-          <el-form-item label="第二次接种时间" prop="secondVacTime">
-          <el-input v-model="dataForm.secondVacTime" placeholder="第二次接种时间"></el-input>
-      </el-form-item>
-          <el-form-item label="第二次接种地点" prop="secondVacSite">
-          <el-input v-model="dataForm.secondVacSite" placeholder="第二次接种地点"></el-input>
-      </el-form-item>
-          <el-form-item label="第三次接种时间" prop="thirdVacTime">
-          <el-input v-model="dataForm.thirdVacTime" placeholder="第三次接种时间"></el-input>
-      </el-form-item>
-          <el-form-item label="第三次接种地点" prop="thirdVacSite">
-          <el-input v-model="dataForm.thirdVacSite" placeholder="第三次接种地点"></el-input>
-      </el-form-item>
-          <el-form-item label="原因：禁忌症/拒绝接种/其他原因" prop="reason">
-          <el-input v-model="dataForm.reason" placeholder="原因：禁忌症/拒绝接种/其他原因"></el-input>
-      </el-form-item>
-          <el-form-item label="备注" prop="note">
-          <el-input v-model="dataForm.note" placeholder="备注"></el-input>
-      </el-form-item>
-          <el-form-item label="删除标识 0.未删除 1.已删除" prop="delFlag">
-          <el-input v-model="dataForm.delFlag" placeholder="删除标识 0.未删除 1.已删除"></el-input>
-      </el-form-item>
-          <el-form-item label="乐观锁" prop="revision">
-          <el-input v-model="dataForm.revision" placeholder="乐观锁"></el-input>
-      </el-form-item>
-          <el-form-item label="创建人" prop="createdBy">
-          <el-input v-model="dataForm.createdBy" placeholder="创建人"></el-input>
-      </el-form-item>
-          <el-form-item label="创建时间" prop="createdTime">
-          <el-input v-model="dataForm.createdTime" placeholder="创建时间"></el-input>
-      </el-form-item>
-          <el-form-item label="更新人" prop="updatedBy">
-          <el-input v-model="dataForm.updatedBy" placeholder="更新人"></el-input>
-      </el-form-item>
-          <el-form-item label="更新时间" prop="updatedTime">
-          <el-input v-model="dataForm.updatedTime" placeholder="更新时间"></el-input>
-      </el-form-item>
-      </el-form>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')"
+             :close-on-click-modal="false"
+             :close-on-press-escape="false"
+             center>
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" class="form">
+      <el-form-item label="所属网格" label-width="150px" prop="gridId">
+        <el-select class="item_width_2"
+                   v-model.trim="dataForm.gridId"
+                   placeholder="请选择"
+                   clearable
+                   @change="handleChangeGrid"
+        >
+          <el-option v-for="item in gridList"
+                     @click.native="gridClick(item)"
+                     :key="item.value"
+                     :label="item.label"
+                     :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="所属房屋" label-width="150px" prop="homeId">
+              <el-select
+                  v-model.trim="dataForm.villageId"
+                  placeholder="请选择小区"
+                  size="small"
+                  clearable
+                  class="resi-cell-select"
+                  @change="handleChangeV"
+                  style="margin-right: 8px; width: 120px"
+              >
+                <el-option
+                    v-for="item in villageList"
+                    @click.native="villageClick(item)"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                >
+                </el-option>
+              </el-select>
+              <el-select
+                  v-model.trim="dataForm.buildId"
+                  placeholder="楼号"
+                  size="small"
+                  clearable
+                  :disabled="changeVDisabled"
+                  class="resi-cell-select resi-cell-select-middle"
+                  @change="handleChangeB"
+                  style="margin-right: 8px; width: 120px"
+              >
+                <el-option
+                    v-for="item in buildList"
+                    @click.native="buildClick(item)"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                >
+                </el-option>
+              </el-select>
+              <el-select
+                  v-model.trim="dataForm.unitId"
+                  placeholder="单元"
+                  size="small"
+                  clearable
+                  :disabled="changeBDisabled"
+                  class="resi-cell-select resi-cell-select-middle"
+                  @change="handleChangeD"
+                  style="margin-right: 8px; width: 120px"
+              >
+                <el-option
+                    v-for="item in unitList"
+                    @click.native="unitClick(item)"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                >
+                </el-option>
+              </el-select>
+              <el-select
+                  v-model.trim="dataForm.homeId"
+                  placeholder="房号"
+                  size="small"
+                  clearable
+                  :disabled="changeDDisabled"
+                  class="resi-cell-select resi-cell-select-middle"
+                  @change="handleChangeH"
+                  style="width: 120px"
+              >
+                <el-option
+                    v-for="item in homeList"
+                    @click.native="homeClick(item)"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                >
+                </el-option>
+              </el-select>
+      </el-form-item>
+      <el-form-item label="户口性质" label-width="150px">
+          <el-select class="item_width_2"
+                     v-model.trim="dataForm.householdType"
+                     placeholder="请选择"
+                     clearable
+          >
+            <el-option v-for="item in household"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+      </el-form-item>
+      <el-form-item label="姓名" label-width="150px" prop="name">
+          <el-input class="item_width_2" style="width: 200px; margin-right: 20px" clearable v-model="dataForm.name"  placeholder="姓名"></el-input>
+      </el-form-item>
+      <el-form-item label="联系电话" label-width="150px" prop="mobile">
+          <el-input v-model="dataForm.mobile" class="item_width_2"  placeholder="联系电话"></el-input>
+      </el-form-item>
+      <el-form-item label="身份证号" label-width="150px" prop="idCard">
+          <el-input v-model="dataForm.idCard" class="item_width_2" placeholder="身份证号"></el-input>
+      </el-form-item>
+      <el-form-item label="是否接种" label-width="150px">
+          <el-select class="item_width_2"
+                     v-model.trim="dataForm.isVaccination"
+                     placeholder="请选择"
+                     clearable
+          >
+            <el-option v-for="item in isVaccinationOption"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+      </el-form-item>
+      <el-form-item v-if="dataForm.isVaccination === '1'" label="第一次接种时间" label-width="150px" >
+        <el-date-picker
+            v-model="dataForm.firstVacTime"
+            type="date"
+            placeholder="选择日期时间"
+            value-format="yyyy-MM-dd"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item v-if="dataForm.isVaccination === '1'" label="第一次接种地点" label-width="150px" >
+          <el-input v-model="dataForm.firstVacSite" class="item_width_2" placeholder="第一次接种地点"></el-input>
+      </el-form-item>
+      <el-form-item v-if="dataForm.isVaccination === '1'" label="第二次接种时间" label-width="150px">
+        <el-date-picker
+            v-model="dataForm.secondVacTime"
+            type="date"
+            placeholder="选择日期时间"
+            value-format="yyyy-MM-dd"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item v-if="dataForm.isVaccination === '1'" label="第二次接种地点" label-width="150px">
+          <el-input v-model="dataForm.secondVacSite" class="item_width_1" placeholder="第二次接种地点"></el-input>
+      </el-form-item>
+      <el-form-item v-if="dataForm.isVaccination === '1'" label="第三次接种时间" label-width="150px">
+        <el-date-picker
+            v-model="dataForm.thirdVacTime"
+            type="date"
+            placeholder="选择日期时间"
+            value-format="yyyy-MM-dd"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item v-if="dataForm.isVaccination === '1'" label="第三次接种地点" label-width="150px">
+          <el-input v-model="dataForm.thirdVacSite" class="item_width_2" placeholder="第三次接种地点"></el-input>
+      </el-form-item>
+      <el-form-item v-if="dataForm.isVaccination === '0'" label="原因" label-width="150px">
+          <el-select class="item_width_2"
+                     v-model.trim="dataForm.reason"
+                     placeholder="请选择"
+                     clearable
+          >
+            <el-option v-for="item in reasonOption"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+      </el-form-item>
+      <el-form-item label="备注" label-width="150px">
+        <el-input
+            class="item_width_1"
+            type="textarea"
+            maxlength="500"
+            show-word-limit
+            :rows="3"
+            placeholder="请输入备注，不超过500字"
+            v-model="dataForm.note"
+        ></el-input>
+      </el-form-item>
+    </el-form>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
       <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
@@ -107,11 +201,29 @@
 
 <script>
     import debounce from 'lodash/debounce'
-
+    import { requestPost } from '@/js/dai/request'
     export default {
   data () {
     return {
       visible: false,
+      gridList: [],
+      villageList: [],
+      buildList: [],
+      unitList: [],
+      homeList: [],
+      household: [
+        { value: '0', label: '户籍' },
+        { value: '1', label: '外来' },
+      ],
+      isVaccinationOption: [
+        { value: '0', label: '否' },
+        { value: '1', label: '是' },
+      ],
+      reasonOption: [
+        { value: '禁忌症', label: '禁忌症' },
+        { value: '拒绝接种', label: '拒绝接种' },
+        { value: '其他原因', label: '其他原因' },
+      ],
       dataForm: {
         id: '',
         customerId: '',
@@ -131,7 +243,7 @@
         name: '',
         mobile: '',
         idCard: '',
-        isVaccination: '',
+        isVaccination: '1',
         firstVacTime: '',
         firstVacSite: '',
         secondVacTime: '',
@@ -146,6 +258,15 @@
     }
   },
   computed: {
+    changeVDisabled() {
+      return !this.dataForm.villageId
+    },
+    changeBDisabled() {
+      return !this.dataForm.buildId
+    },
+    changeDDisabled() {
+      return !this.dataForm.unitId
+    },
     dataRule () {
       return {
         customerId: [
@@ -229,8 +350,17 @@
       }
     }
   },
+  async created () {
+    const { user } = this.$store.state
+    this.agencyId = user.agencyId
+    //获取网格下拉框数据
+    await this.loadGrid()
+  },
   methods: {
     init () {
+      debugger
+      const { user } = this.$store.state
+      this.agencyId = user.agencyId
       this.visible = true;
       this.$nextTick(() => {
         this.$refs['dataForm'].resetFields()
@@ -249,30 +379,321 @@
           ...this.dataForm,
           ...res.data
         }
+        this.getVillageList()
+        this.getBuildList()
+        this.getUniList()
+        this.getHouseList()
       }).catch(() => {})
     },
-    // 表单提交
-    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid) => {
-        if (!valid); {
-          return false
-        }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/epmetuser/icVaccinePrarmeter/', this.dataForm).then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg);
-          }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false;
-              this.$emit('refreshDataList')
+    async loadGrid () {
+      const url = "/gov/org/customergrid/gridoption"
+      let params = {
+        agencyId: this.agencyId
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+        this.gridList = data
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    getVillageList() {
+      const { user } = this.$store.state
+      this.$http
+          .post('/gov/org/icneighborhood/neighborhoodoption', {
+            gridId: this.dataForm.gridId,
+            agencyId: ''
+            // agencyId: user.agencyId
+          })
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg)
+            } else {
+              console.log('获取查询小区成功', res.data)
+              this.villageList = res.data
             }
           })
-        }).catch(() => {})
-      })
-    }, 1000, { 'leading': true, 'trailing': false })
+          .catch(() => {
+            return this.$message.error('网络错误')
+          })
+    },
+    getBuildList() {
+      this.$http
+          .post('/gov/org/icbuilding/buildingoption', {
+            neighborHoodId: this.dataForm.villageId
+          })
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg)
+            } else {
+              console.log('获取查询小区成功', res.data)
+              this.buildList = res.data
+            }
+          })
+          .catch(() => {
+            return this.$message.error('网络错误')
+          })
+    },
+    getUniList() {
+      this.$http
+          .post('/gov/org/icbuildingunit/unitoption', {
+            buildingId: this.dataForm.buildId
+          })
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg)
+            } else {
+              console.log('获取查询单元成功', res.data)
+              this.unitList = res.data
+            }
+          })
+          .catch(() => {
+            return this.$message.error('网络错误')
+          })
+    },
+    getHouseList() {
+      this.$http
+          .post('/gov/org/ichouse/houseoption', { unitId: this.dataForm.unitId })
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg)
+            } else {
+              console.log('获取查询房屋成功', res.data)
+              this.homeList = res.data
+            }
+          })
+          .catch(() => {
+            return this.$message.error('网络错误')
+          })
+    },
+    handleChangeGrid(val) {
+      this.dataForm.villageId = ''
+      this.dataForm.buildId = ''
+      this.dataForm.unitId = ''
+      this.dataForm.homeId = ''
+      this.dataForm.gridName = ''
+      this.dataForm.agencyId = ''
+      this.dataForm.villageName = ''
+      this.dataForm.buildName = ''
+      this.dataForm.unitName = ''
+      this.dataForm.homeName = ''
+      this.getVillageList()
+    },
+    handleChangeV(val) {
+      console.log('val', val)
+      this.dataForm.buildId = ''
+      this.dataForm.unitId = ''
+      this.dataForm.homeId = ''
+      this.dataForm.villageName = ''
+      this.dataForm.buildName = ''
+      this.dataForm.unitName = ''
+      this.dataForm.homeName = ''
+      this.getBuildList()
+    },
+    handleChangeB(val) {
+      console.log('val', val)
+      this.dataForm.unitId = ''
+      this.dataForm.homeId = ''
+      this.dataForm.buildName = ''
+      this.dataForm.unitName = ''
+      this.dataForm.homeName = ''
+      this.getUniList()
+    },
+    handleChangeD(val) {
+      console.log('val', val)
+      this.dataForm.homeId = ''
+      this.dataForm.unitName = ''
+      this.dataForm.homeName = ''
+      this.getHouseList()
+    },
+    handleChangeH(val) {
+      console.log('val', val)
+      this.dataForm.homeName = ''
+    },
+    gridClick(data) {
+      this.dataForm.gridName = data.label;
+      this.dataForm.agencyId = data.pid;
+    },
+    villageClick(data) {
+      this.dataForm.villageName = data.label;
+    },
+    buildClick(data) {
+      this.dataForm.buildName = data.label;
+    },
+    unitClick(data) {
+      this.dataForm.unitName = data.label;
+    },
+    homeClick(data) {
+      this.dataForm.homeName = data.label;
+    },
+    resetData () {
+      this.formData = {
+        id: '',
+        customerId: '',
+        gridId: '',
+        gridName: '',
+        agencyId: '',
+        pids: '',
+        villageId: '',
+        villageName: '',
+        buildId: '',
+        buildName: '',
+        unitId: '',
+        unitName: '',
+        homeId: '',
+        homeName: '',
+        householdType: '',
+        name: '',
+        mobile: '',
+        idCard: '',
+        isVaccination: '1',
+        firstVacTime: '',
+        firstVacSite: '',
+        secondVacTime: '',
+        secondVacSite: '',
+        thirdVacTime: '',
+        thirdVacSite: '',
+        reason: '',
+        note: '',
+        checkState: '0',
+        checkReason: ''
+      }
+    },
+    closeDialog() {
+      this.$refs[dataForm].resetFields();
+      // this.formData = {}
+      // this.resetData()
+    },
+    // 表单提交
+    async dataFormSubmitHandle() {
+      let url = "";
+      if (!this.dataForm.id ) {
+        url = "/epmetuser/icVaccinePrarmeter/save";
+      } else if (this.dataForm.id) {
+        url = "/epmetuser/icVaccinePrarmeter/update";
+      } else {
+        return;
+      }
+      const { data, code, msg } = await requestPost(url, this.dataForm);
+
+      if (code === 0) {
+        this.$message({
+          type: "success",
+          message: "操作成功",
+        });
+        this.resetData();
+        this.visible = false;
+        this.btnDisable = false;
+      } else {
+        this.btnDisable = false;
+        this.$message.error(msg);
+      }
+
+      // this.$refs['dataForm'].validate((valid) => {
+      //   if (!valid); {
+      //     return false
+      //   }
+      //
+      //   this.$http[!this.dataForm.id ? 'post' : 'put'](url, this.dataForm).then(({ data: res }) => {
+      //     if (res.code !== 0) {
+      //       return this.$message.error(res.msg);
+      //     }
+      //     this.$message({
+      //       message: this.$t('prompt.success'),
+      //       type: 'success',
+      //       duration: 500,
+      //       onClose: () => {
+      //         this.visible = false;
+      //         this.$emit('refreshDataList')
+      //       }
+      //     })
+      //   }).catch(() => {})
+      // })
+    }
   }
 }
 </script>
+<style lang="scss" scoped>
+@import '@/assets/scss/buttonstyle.scss';
+@import "@/assets/scss/modules/management/epidemic.scss";
+.resi-container .resi-card-table {
+  ::v-deep .el-table th {
+    color: #fff;
+    background-color: rgba(33, 149, 254, 1);
+    // border-right: 1px solid rgba(33, 149, 254, 1);
+  }
+}
+.resi-table {
+  ::v-deep .el-button--text {
+    text-decoration: underline;
+  }
+}
+.resi-card-table {
+  margin-top: 20px;
+}
+.resi-row-btn {
+  margin-bottom: 13px;
+  .upload-btn {
+    display: inline-block;
+    margin: 0 10px;
+  }
+}
+
+.resi-btns {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.resi-container .resi-card {
+  position: relative;
+  overflow: visible;
+}
+
+.demo-form-inline {
+  // display: flex;
+  // align-items: center;
+  // margin-bottom: 20px;
+
+  .resi-cell-label {
+    flex-shrink: 0;
+    min-width: 0;
+    box-sizing: border-box;
+    margin-right: 15px;
+    // text-align: right;
+    // line-height: 32;
+  }
+  .resi-cell-label1 {
+    width: max-content;
+  }
+  .resi-cell-value-radio {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+  }
+  .resi-cell-input {
+    width: 200px;
+  }
+  .resi-cell--daterange {
+    max-width: 260px;
+  }
+  .resi-cell-select {
+    width: 200px;
+    box-sizing: border-box;
+    margin-right: 10px;
+    &-middle {
+      width: 120px;
+    }
+    &-small {
+      width: 88px;
+    }
+  }
+  .resi-cell-select:last-child {
+    margin-right: 0;
+  }
+}
+
+.mt10 {
+  margin-top: 10px;
+}
+</style>