列表提交

src/api/serviceSchedule.js

+import request from 'mn-template/plugins/http';
+export const getFirstLevelLable = async () => {
+  return request({
+    url: '/contents/admin/label/getFirstLevelLable/1',
+    method: 'get',
+  });
+};
+export const childLabelList = async (data) => {
+  return request({
+    url: '/contents/admin/label/childLabelList',
+    params: data,
+    method: 'get',
+  });
+};
+export const workQuery = async(data) => {
+  return request({
+      url: '/diagnose/doctor/work/workQuery',
+      data: data,
+      method: 'post',
+  });
+};
+export const switchOpen = async(data) => {
+  return request({
+      url: '/diagnose/doctor/work/switchOpen',
+      data: data,
+      method: 'post',
+  });
+};
+export const workInStep = async() => {
+  return request({
+      url: '/diagnose/doctor/work/inStep',
+      method: 'post',
+  });
+};
+export const getLevel = async() => {
+  return request({
+      url: '/diagnose/doctor/work/getLevel',
+      method: 'post',
+  });
+};
\ No newline at end of file

src/components/common/diagnosis-doctor.vue

@@ -394,6 +394,13 @@
     created() {
       // this.startTimeValue = this.rangeTimeData;
       console.log('``````', this.rangeTimeData);
+      // if (this.rangeTimeData) {
+      //   this.timeRange = Number(20);
+      //   this.endTimeValue = dayjs(this.rangeTimeData)
+      //     .add(this.timeRange, 'minute')
+      //     .format('YYYY-MM-DD HH:mm:ss');
+      // }
+      console.log('``````', this.rangeTimeData, this.endTimeValue);
       vm = this;
       this.getDoctorList();
     },
@@ -470,8 +477,8 @@
         this.doctorId = '';
         this.formData.outsideDoctor = '';
         // this.startTimeValue = this.rangeTimeData;
-        this.endTimeValue = '';
-        this.timeRange = '';
+        // this.endTimeValue = '';
+        // this.timeRange = Number(20);
         this.$emit('update:diagnosisDoctorVisible', false);
       },
       opendialog() {
@@ -526,6 +533,15 @@
       },
       openDiagnosisStartTimeDialog() {
         this.startTimeValue = this.rangeTimeData;
+        if (!this.startTimeValue) {
+          this.timeRange = '';
+          this.endTimeValue = '';
+        }else{
+          this.timeRange = Number(20);
+          this.endTimeValue = dayjs(this.rangeTimeData)
+            .add(this.timeRange, 'minute')
+            .format('YYYY-MM-DD HH:mm:ss');
+        }
         this.diagnosisStartTimeDialog = true;
       },
       startTimeConfirm(isCancle) {
@@ -534,6 +550,15 @@
           // this.startTimeValue = '';
           this.endTimeValue = '';
           this.timeRange = '';
+        //   if (!this.startTimeValue) {
+        //   this.timeRange = '';
+        //   this.endTimeValue = '';
+        // }else{
+        //   this.timeRange = Number(20);
+        //   this.endTimeValue = dayjs(this.rangeTimeData)
+        //     .add(this.timeRange, 'minute')
+        //     .format('YYYY-MM-DD HH:mm:ss');
+        // }
         }
         if (isCancle == 'submit') {
           if (String(this.startTimeValue).trim() === '' || !this.startTimeValue) {

src/components/list/table-serviceSchedule.vue

+<template>
+  <div class="table-serviceSchedule">
+    <el-table
+      v-loading="loading"
+      class="search-table"
+      style="width: 100%"
+      :data="tableData"
+      @sort-change="sortfunc"
+    >
+      <el-table-column
+        prop="doctorId"
+        label="医生ID"
+        width="170"
+        align="center"
+      />
+      <el-table-column
+        prop="doctorName"
+        label="医生姓名"
+        width="170"
+        align="center"
+      />
+      <el-table-column
+        prop="serviceOpen"
+        label="服务开通"
+        width="150"
+        align="center"
+        column-key="serviceOpen"
+        :filter-multiple="false"
+        :filters="serviceOpenList"
+        :filter-method="getServiceOpen"
+      >
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.serviceOpen ==='1' ? '开通': '未开通' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="hospital"
+        label="所属机构"
+        width="200"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        prop="departmentName"
+        label="科室"
+        width="170"
+        align="center"
+      />
+      <el-table-column
+        prop="level"
+        label="匹配优先级"
+        align="center"
+        width="150"
+        column-key="level"
+        :filter-multiple="false"
+        :filters="createList"
+        :filter-method="getLevel"
+      />
+      <el-table-column
+        prop="workStatus"
+        label="排班状态"
+        width="170"
+        align="center"
+        column-key="workStatus"
+        :filter-multiple="false"
+        :filters="workStatusList"
+        :filter-method="getWorkStatus"
+      >
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.workStatus ==='2' ? '未排班': '已排班' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="modifiedTime"
+        label="修改时间"
+        width="170"
+        align="center"
+        sortable
+      />
+      <el-table-column
+        prop="mobilePhone"
+        label="联系电话"
+        width="170"
+        align="center"
+      />
+      <el-table-column
+        property="delivery"
+        align="center"
+        label="接单开关"
+      >
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.delivery"
+            active-color="#0D9078"
+            @change="changeSwitch(scope.$index,scope.row)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        fixed="right"
+        align="center"
+        min-width="200"
+      >
+        <template slot-scope="scope">
+          <div
+            class="scope-work"
+            style="display:flex"
+          >
+            <div
+              v-if=" scope.row.workStatus === '2'"
+              class="download-btn"
+              @click="addSchedule(scope.row,1)"
+            >
+              新增排班
+            </div>
+            <div
+              v-else
+              class="download-btn"
+              @click="addSchedule(scope.row,2)"
+            >
+              编辑排班
+            </div>
+            <div
+              class="download-btn"
+              @click="addSchedule(scope.row,2)"
+            >
+              查看
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <div class="pagination">
+      <el-pagination
+        background
+        :current-page="pageNo"
+        :page-sizes="[15, 30, 50, 100, 150, 200]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalRows"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    components: {
+      // NewScheduling,
+    },
+    props: {
+      tableData: {
+        type: Array,
+        default() {
+          return [];
+        },
+      },
+      createList: {
+        type: Array,
+        default() {
+          return [];
+        },
+      },
+      pageNo: {
+        type: Number,
+        default: 1,
+      },
+      pageSize: {
+        type: Number,
+        default: 20,
+      },
+      totalRows: {
+        type: Number,
+        default: 0,
+      },
+      loading: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        workStatusList:[
+          {
+            text: '已排班',
+            value: '已排班' 
+          }, 
+          { 
+            text: '未排班', 
+            value: '未排班' 
+          }
+        ],
+        serviceOpenList:[
+          { 
+            value: 1, 
+            text: '开通'
+          },
+          { 
+            value: 2, 
+            text: '未开通'
+          },
+        ],
+      };
+    },
+    mounted() {},
+    methods:{
+      changeSwitch(value, val) {
+        console.log(value, val, '123');
+        this.$emit('changeSwitch', value, val);
+      },
+      // handleFilterChange(value) {
+      //   console.log(value, 'handleFilterChange');
+      // },
+      getServiceOpen(value, row) {
+        return row.serviceOpen === String(value);
+      },
+      getLevel(value, row) {
+        return row.level === String(value);
+      },
+      getWorkStatus(value, row) {
+        console.log(value, row);
+        let newValue = '';
+        if (value === '未排班') {
+          newValue = '2';
+        }else{
+          newValue = '1';
+        }
+        return row.workStatus === String(newValue);
+      },
+      showworkStatus() {
+        console.log(11111);
+        this.isworkStatus = !this.isworkStatus;
+        console.log(this.isworkStatus);
+      },
+      addSchedule(value, val) {
+        console.log(value, val, '123212321');
+        this.$emit('addSchedule', value, val);
+      },
+      // 分页
+      handleSizeChange(value) {
+        this.$emit('handleSizeChange', value);
+      },
+      handleCurrentChange(value) {
+        this.$emit('handleCurrentChange', value);
+      },
+      sortfunc(data) {
+        this.$emit('sortfunc', data);
+      },
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+    .table-serviceSchedule{
+        .el-table {
+          border-radius: 8px;
+    // 深度选择器
+    /deep/ .highlight{
+      color: #0D9078 !important;
+    }
+    .scope-work{
+      display: flex;
+      justify-content: center;
+      .download-btn{
+      color: #0D9078;
+      cursor: pointer;
+      margin-right: 10px;
+    }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/router/index.js

@@ -62,6 +62,12 @@ const workbench = (r) =>
     () => r(require('@/views/IM/diagnosis-admin/workbench.vue')),
     'workbench'
   );
+const serviceSchedule = (r) =>
+  require.ensure(
+    [],
+    () => r(require('@/views/IM/diagnosis-admin/serviceSchedule.vue')),
+    'serviceSchedule'
+  );
 const administrators = (r) =>
   require.ensure(
     [],
@@ -124,6 +130,10 @@ const routerConfig = [
         path: '/workbench',
         component: workbench,
       },
+      {
+        path: '/serviceSchedule',
+        component: serviceSchedule,
+      },
       {
         path: '/administrators',
         component: administrators,

src/utils/GeneralData/serviceSchedule-table.js

+//  serviceSchedule-table
+export const SERVICESCHEDUle_TABLE = [
+  {
+    prop: 'doctorId',
+    label: '医生ID',
+    showtooltip: false,
+  },
+  {
+    prop: 'doctorName',
+    label: '医生姓名',
+    showtooltip: false,
+  },
+  {
+    prop: 'hospital',
+    label: '所属机构',
+    showtooltip: false,
+  },
+  {
+    prop: 'departmentName',
+    label: '科室',
+    showtooltip: false,
+  },
+  {
+    prop: 'level',
+    label: '匹配优先级',
+    showtooltip: false,
+  },
+  {
+    prop: 'workStatus',
+    label: '排班状态',
+    showtooltip: false,
+  },
+  {
+    prop: 'modifiedTime',
+    label: '修改时间',
+    showtooltip: false,
+  },
+  {
+    prop: 'mobilePhone',
+    label: '联系电话',
+    showtooltip: false,
+  }
+  // {
+  //   prop: 'switchStatus',
+  //   label: '接单开关',
+  //   showtooltip: false,
+  // },
+];

src/views/IM/diagnosis-admin/diagnosis-list-new.vue

@@ -626,10 +626,10 @@
     },
     methods: {
       changeStartTime(time) {
-        console.log(time, '1233212321`');
         this.rangeTimeData = time
-          ? new Date(time.time).format('yyyy-MM-dd hh:mm:ss')
+          ? time.time ? new Date(time.time).format('yyyy-MM-dd hh:mm:ss') : ''
           : '';
+        console.log(this.rangeTimeData, 'this.rangeTimeData');
       },
       getTableData(val) {
         this.saveTableData = val || [];

src/views/IM/diagnosis-admin/modal/newScheduling.vue

+<template>
+  <div>新增排班</div>
+</template>
+
+<script>
+  export default {};
+</script>
+
+<style></style>

src/views/IM/diagnosis-admin/serviceSchedule.vue

+<template>
+  <div class="serviceScheduleNew">
+    <div
+      v-if="ScheduleListShow"
+      class="serviceSchedule"
+    >
+      <div class="header">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item>首页</el-breadcrumb-item>
+          <el-breadcrumb-item>服务排班表</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="serviceSchedule-container">
+        <div class="serviceSchedule-containerInfo">
+          <el-cascader
+            v-model="innerform"
+            class="serviceSchedule-cascader"
+            filterable
+            clearable
+            :options="interfaceOptions"
+            :props="props"
+            placeholder="选择科室"
+            :show-all-levels="false"
+            @expand-change="handleItemChange"
+            @change="selectApi($event, innerform)"
+          />
+          <el-select
+            v-model="searchParam.createType"
+            class="select-first"
+            placeholder="选择优先级"
+            clearable
+          >
+            <el-option
+              v-for="(item,index) of createList"
+              :key="index"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+          <el-select
+            v-model="searchParam.serviceOpen"
+            class="select-first"
+            placeholder="选择开通状态"
+            clearable
+          >
+            <el-option
+              v-for="item of serviceOpenList"
+              :key="item.id"
+              :label="item.value"
+              :value="item.id"
+            />
+          </el-select>
+          <el-select
+            v-model="searchParam.ScheduleStatus"
+            class="serviceSchedule-status"
+            placeholder="选择排班状态"
+            clearable="true"
+          >
+            <el-option
+              v-for="item of ScheduleStatusList"
+              :key="item.id"
+              :label="item.value"
+              :value="item.id"
+            />
+          </el-select>
+          <el-date-picker
+            v-model="searchParam.createRangeTime"
+            class="serviceSchedule-time"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="→"
+            size="large"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+          />
+          <el-input
+            v-model="searchParam.idNamePhone"
+            clearable
+            class="serviceSchedule-idNamePhone"
+            placeholder="输入问诊单号/医生姓名/手机号"
+            style="width: 280px"
+          />
+          <el-button
+            type="primary"
+            class="submit-btn"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <div class="synchro-btn-icon">
+            <el-button
+              class="synchro-btn"
+              @click="searchInStep"
+            >
+              同步信息
+            </el-button>
+            <img
+              class="el-icon-s-question"
+              src="../../../assets/image/question.png"
+              alt
+            >
+          </div>
+        </div>
+        <div class="serviceSchedule-table">
+          <TableServiceSchedule
+            :table-data="tableData"
+            :page-no="searchParam.pageNo"
+            :page-size="searchParam.pageSize"
+            :total-rows="searchParam.totalRows"
+            :loading="loading"
+            :create-list="newCreateList"
+            @sortfunc="sortfunc"
+            @getServiceOpen="getServiceOpen"
+            @getWorkStatus="getWorkStatus"
+            @changeSwitch="changeSwitch"
+            @handleSizeChange="handleSizeChange"
+            @handleCurrentChange="handleCurrentChange"
+            @addSchedule="addSchedule"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="newScheduling"
+    >
+      <div class="header">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item>首页</el-breadcrumb-item>
+          <el-breadcrumb-item>服务排班表</el-breadcrumb-item>
+          <el-breadcrumb-item>新增排班</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="serviceSchedule-container">
+        <div class="serviceSchedule-containerInfo">
+          <NewScheduling />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getFirstLevelLable, childLabelList, workQuery, switchOpen, workInStep, getLevel} from '@/api/serviceSchedule';
+  import { SERVICESCHEDUle_TABLE } from '@/utils/GeneralData/serviceSchedule-table';
+  import TableServiceSchedule from '@/components/list/table-serviceSchedule';
+  import NewScheduling from '../diagnosis-admin/modal/newScheduling.vue';
+  export default {
+    components: {
+      NewScheduling,
+      TableServiceSchedule,
+    },
+    data() {
+      return {
+        innerform: [],
+        props: {
+          // props定义的值根据接口返回的数据定的
+          label: 'name',
+          value: 'id',
+          children: 'interface',
+        },
+        searchParam: {
+          departmentId: '',
+          createType: '',
+          idNamePhone: '',
+          ScheduleStatus:'',
+          startRangeTime:'',
+          endRangeTime:'',
+          serviceOpen:'',
+          pageSize: 15,
+          pageNo: 1,
+          sort:'',
+          createRangeTime:[]
+        },
+        ScheduleStatusList:[
+          {
+            value:'已排班',
+            id:1
+          },
+          {
+            value:'未排班',
+            id:2
+          },
+        ],
+        serviceOpenList:[
+          {
+            value:'开通',
+            id:1
+          },
+          {
+            value:'未开通',
+            id:2
+          },
+        ],
+        createList:[],
+        interfaceOptions: [],
+        createRangeTime: [],
+        pickerOptions: {
+          disabledDate: (time) => {
+            return time.getTime() > new Date().getTime(); // 减去一天的时间代表可以选择同一天;
+          },
+        },
+        ScheduleListShow: true,
+        showTableData:SERVICESCHEDUle_TABLE,
+        tableData:[],
+        loading: false,
+        newCreateList:[],
+        // newCreateObj:{}
+      };
+    },
+    watch: {},
+    created() {
+      this.getFirstLevelLable();
+      this.getLevel();
+      this.search(); 
+    },
+    methods: {
+      // 通过监听expand-change事件（当展开节点发生变化时触发）获取第二层数据，组装interfaceOptions数据
+      handleItemChange(val) {
+        const value = val[0];
+        childLabelList({ parentId: value, publish: 1 }).then((res) => {
+          console.log(res);
+          if (res.code === '000000') {
+            const interfaceArr = res.data || [];
+            this.interfaceOptions.filter((item) => {
+              if (item.id === value) {
+                this.$set(item, 'interface', interfaceArr);
+              }
+              return;
+            });
+          }
+        });
+      },
+      getFirstLevelLable() {
+        getFirstLevelLable().then((res) => {
+          if (res.code === '000000') {
+            console.log(res);
+            this.interfaceOptions = res.data || [];
+            this.interfaceOptions.forEach((item, index) => {
+              // 添加属性
+              this.$set(this.interfaceOptions[index], 'interface', []);
+              console.log(this.interface);
+            });
+          } else {
+            this.$message({
+              message: res.msg,
+              type: 'warning',
+            });
+          }
+        });
+      },
+      // 获取选择的值
+      selectApi(e, value) {
+        console.log(value, 'value');
+        this.searchParam.departmentId = value[1];
+        console.log(this.searchParam);
+      },
+      search() {
+        this.loading = true;
+        const params = {
+          departmentId: this.searchParam.departmentId || null,
+          workStatus: String(this.searchParam.ScheduleStatus) || null,
+          startTime: this.searchParam.createRangeTime.length > 0 ? this.searchParam.createRangeTime[0] : null,
+          endTime: this.searchParam.createRangeTime.length > 0 ? this.searchParam.createRangeTime[1] : null,
+          condition: this.searchParam.idNamePhone || null,
+          level: this.searchParam.createType || null,
+          sort:this.searchParam.sort || null,
+          serviceOpen: String(this.searchParam.serviceOpen) || null,
+          pageNo: this.searchParam.pageNo,
+          pageSize: this.searchParam.pageSize,
+        };
+        workQuery(params).then(res => {
+          this.loading = false;
+          if (res.code === '000000') {
+            this.tableData = res.data.list || [];
+            this.searchParam.totalRows = res.data.count;
+          }
+        });
+      },
+      getServiceOpen(value) {
+        console.log(value, '22222');
+        this.searchParam.serviceOpen = value;
+        console.log(this.searchParam);
+      },
+      getWorkStatus(value) {
+        console.log(value, '22223333');
+        this.searchParam.ScheduleStatus = value;
+        console.log(this.searchParam);
+      },
+      changeSwitch(value, val) {
+        console.log(value, val, '12321');
+        switchOpen({
+          id:val.id,
+          switchOpen:val.delivery ? '1' : '2'
+        }).then(res => {
+          if (res.code === '000000') {
+            console.log(res);
+            this.search();
+          }
+        });
+       
+      },
+      searchInStep() {
+        workInStep().then(res => {
+          if (res.code === '000000') {
+            this.search();
+          }
+        });
+      },
+      handleSizeChange(value) {
+        this.searchParam.pageSize = value;
+        this.search();
+      },
+      handleCurrentChange(value) {
+        this.searchParam.pageNo = value;
+        this.search();
+      },
+      getLevel() {
+        getLevel().then(res => {
+          if (res.code === '000000') {
+            console.log(res, 'getLevel');
+            this.createList = res.data || [];
+            this.createList.forEach(item => {
+              const newCreateObj = {
+                value:'',
+                text:''
+              };
+              newCreateObj.value = item;
+              newCreateObj.text = item;
+              this.newCreateList.push(newCreateObj);
+            });
+            console.log(this.newCreateList, 'this.newCreateList');
+          }
+        });
+      },
+      sortfunc(data) {
+        console.log(data, 'data');
+        if (data.prop === '"modifiedTime"' && data.order === 'descending') {
+          this.searchParam.sort = '1';
+        } else{
+          this.searchParam.sort = '2';
+        }
+        this.search();
+      },
+      addSchedule(value, val) {
+        console.log(value, val, 'value,val');
+        this.ScheduleListShow = false;
+      }
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+.serviceScheduleNew {
+  .serviceSchedule {
+    height: calc(100% - 76px);
+    .header {
+      padding: 30px;
+      width: 100%;
+    }
+    .serviceSchedule-container {
+      width: 100%;
+      padding: 0 14px;
+      .serviceSchedule-containerInfo {
+        position: relative;
+        min-width: 1200px;
+        background: #ffffff;
+        height: 73px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        padding: 21px 18px 20px 18px;
+        .serviceSchedule-cascader {
+          margin-right: 15px;
+        }
+        .select-first {
+          margin-right: 15px;
+        }
+        .serviceSchedule-status {
+          margin-right: 15px;
+        }
+        .serviceSchedule-time {
+          width: 270px;
+          height: 32px;
+          background: #ffffff;
+          border-radius: 16px;
+          border: 1px solid rgba(0, 0, 0, 0.15);
+          margin-right: 15px;
+        }
+        .serviceSchedule-idNamePhone {
+          width: 320px;
+          margin-right: 15px;
+        }
+        .submit-btn {
+          width: 70px;
+          height: 32px;
+          background: #0d9078;
+          border-radius: 16px;
+          display: flex;
+          align-items: center;
+        }
+        .synchro-btn-icon{
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: absolute;
+          right: 20px;
+          .synchro-btn{
+          width: 110px;
+          height: 32px;
+          border-radius: 18px;
+          border: 1px solid #0D9078;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #FFFFFF;
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #0D9078;
+        }
+        .el-icon-s-question{
+          margin-left:10px;
+          width: 16px;
+          height: 16px;
+        }
+        }
+        
+      }
+      .serviceSchedule-table{
+        min-width: 1200px;
+        padding-top: 15px;
+      }
+    }
+  }
+  .newScheduling {
+    height: calc(100% - 76px);
+    .header {
+      padding: 30px;
+      width: 100%;
+    }
+    .serviceSchedule-container {
+      height: 100%;
+      width: 100%;
+      padding: 0 14px;
+      .serviceSchedule-containerInfo {
+        background: #ffffff;
+        border-radius: 8px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        padding: 21px 18px 20px 18px;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.serviceSchedule-cascader {
+  .el-input {
+    .el-input__inner {
+      width: 150px;
+      height: 32px;
+      background: #ffffff;
+      border-radius: 16px;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+    }
+    .el-input__suffix {
+      display: flex;
+      align-items: center;
+    }
+  }
+  input::-webkit-input-placeholder {
+    color: #89888b;
+  }
+}
+.select-first {
+  .el-input {
+    .el-input__inner {
+      width: 150px;
+      height: 32px;
+      background: #ffffff;
+      border-radius: 16px;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+    }
+    .el-input__suffix {
+      display: flex;
+      align-items: center;
+    }
+  }
+  input::-webkit-input-placeholder {
+    color: #89888b;
+  }
+}
+.serviceSchedule-status {
+  .el-input {
+    .el-input__inner {
+      width: 150px;
+      height: 32px;
+      background: #ffffff;
+      border-radius: 16px;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+    }
+    .el-input__suffix {
+      display: flex;
+      align-items: center;
+    }
+  }
+  input::-webkit-input-placeholder {
+    color: #89888b;
+  }
+}
+.serviceSchedule-idNamePhone {
+  .el-input__inner {
+    // width: 150px;
+    height: 32px;
+    background: #ffffff;
+    border-radius: 16px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+  }
+  .el-input__suffix {
+    display: flex;
+    align-items: center;
+  }
+  input::-webkit-input-placeholder {
+    color: #89888b;
+  }
+}
+.serviceSchedule-time {
+  .el-input__icon {
+    display: flex;
+    align-items: center;
+    margin-left: 10px !important;
+  }
+  .el-range-input {
+    width: 30% !important;
+  }
+  .el-range-separator {
+    width: 10%;
+    display: flex;
+    align-items: center;
+  }
+  input::-webkit-input-placeholder {
+    color: #89888b;
+  }
+}
+</style>