init

src/views/AccompanyOrder/AccompanyOrder.vue

@@ -145,7 +145,7 @@
             </template>
             <template v-else>
               <el-button
-                v-if="isHasAuth('assign') && row.pay_status === 1 && !row.status"
+                v-if="isHasAuth('assign')"
                 size="small"
                 type="primary"
                 @click="isShowAssign = true,$refs['Assign'].row = row"
@@ -199,7 +199,7 @@
     </el-card>
 
     <rich-text-modal ref="RichTextModal" @confirm="({ row, fieldName, text }) => row[fieldName] = text" />
-    <assign ref="Assign" :nurses="nurses" :visible.sync="isShowAssign" @refresh="getList"></assign>
+    <assign ref="Assign" :nurses="nurses" :is-show.sync="isShowAssign" @refresh="getList"></assign>
   </div>
 </template>
 

src/views/AccompanyOrder/components/Assign.vue

@@ -7,7 +7,7 @@
       :visible.sync="visible"
       append-to-body
       :before-close="handleClose"
-      @close="$emit('update:visible',false)"
+      @close="$emit('update:isShow', false)"
     >
       <section class="drawer-container">
         <vxe-table
@@ -17,39 +17,67 @@
           style="margin-top: 10px"
           :loading="loading"
           :max-height="600"
+          :min-height="300"
           keep-source
           show-overflow
           :scroll-y="{ enabled: true, gt: 0 }"
-          :radio-config="{ labelField: 'name', highlight: true }"
+          :radio-config="{ highlight: true }"
           :row-config="{ isCurrent: true, isHover: true }"
           :column-config="{ resizable: true }"
           :data="nurses"
+          :filter-config="{}"
         >
-          <vxe-column type="radio" field="name" width="200" title="护工姓名" header-align="center" />
+          <vxe-column type="radio" width="64" align="center" fixed="left" />
           <vxe-column type="seq" width="58" align="center" />
+          <vxe-column
+            field="name"
+            width="200"
+            title="护工姓名"
+            header-align="center"
+            :filters="nameOptions"
+            :filter-method="nameFilterMethod"
+          >
+            <template #filter="{ column }">
+              <el-input v-for="(option, index) in column.filters" :key="index" v-model="option.data" size="mini" type="type" clearable @input="changeFilterEvent(option)" />
+            </template>
+          </vxe-column>
 
           <vxe-column
             header-align="center"
             field="mobile"
             width="160"
             title="手机号"
-            :edit-render="{ name: 'input', attrs: { type: 'text' } }"
+            :filters="mobileOptions"
-          />
+            :filter-method="nameFilterMethod"
+          >
+            <template #filter="{ column }">
+              <el-input v-for="(option, index) in column.filters" :key="index" v-model="option.data" size="mini" type="type" clearable @input="changeFilterEvent(option)" />
+            </template>
+          </vxe-column>
 
           <vxe-column
             header-align="center"
             field="idcard"
             width="160"
             title="身份证号"
-            :edit-render="{ name: 'input', attrs: { type: 'text' } }"
+            :filters="idcardOptions"
-          />
+            :filter-method="nameFilterMethod"
+          >
+            <template #filter="{ column }">
+              <el-input v-for="(option, index) in column.filters" :key="index" v-model="option.data" size="mini" type="type" clearable @input="changeFilterEvent(option)" />
+            </template>
+          </vxe-column>
 
           <vxe-column
             align="center"
             field="sex"
             width="180"
             title="性别"
-            :edit-render="{ name: 'VxeSelect', options: [{'value':1,'label':'男'},{'value':0,'label':'女'}], props: { multiple: false }, optionProps: { value: 'value', label: 'label' } }"
+            :filters="[
+              { label: '男', value: '1' },
+              { label: '女', value: '0' }
+            ]"
+            :filter-multiple="false"
           />
 
           <vxe-column
@@ -57,7 +85,6 @@
             field="birthday"
             width="180"
             title="生日"
-            :edit-render="{ name: 'VxeDatePicker', props: { type: 'date' } }"
           />
 
           <vxe-column
@@ -65,7 +92,6 @@
             field="hometown"
             width="160"
             title="家乡"
-            :edit-render="{ name: 'input', attrs: { type: 'text' } }"
           />
 
           <vxe-column
@@ -73,7 +99,6 @@
             field="address"
             width="160"
             title="地址"
-            :edit-render="{ name: 'input', attrs: { type: 'text' } }"
           />
 
           <vxe-column
@@ -81,7 +106,6 @@
             field="emergency_phone"
             width="160"
             title="紧急联系电话"
-            :edit-render="{ name: 'input', attrs: { type: 'text' } }"
           />
 
           <vxe-column
@@ -90,7 +114,6 @@
             field="work_years"
             width="160"
             title="年限"
-            :edit-render="{ name: 'input', attrs: { type: 'number' } }"
           />
 
           <vxe-column
@@ -98,7 +121,6 @@
             field="join_at"
             width="180"
             title="加入时间"
-            :edit-render="{ name: 'VxeDatePicker', props: { type: 'date' } }"
           />
 
           <vxe-column
@@ -114,7 +136,15 @@
             field="work_status"
             width="180"
             title="工作状态"
-            :edit-render="{ name: 'VxeSelect', options: [{'value':1,'label':'兼职'},{'value':2,'label':'全职'}], props: { multiple: false }, optionProps: { value: 'value', label: 'label' } }"
+            :edit-render="{
+              name: 'VxeSelect',
+              options: [
+                { value: 1, label: '兼职' },
+                { value: 2, label: '全职' },
+              ],
+              props: { multiple: false },
+              optionProps: { value: 'value', label: 'label' },
+            }"
           />
 
           <vxe-column
@@ -122,7 +152,15 @@
             field="status"
             width="180"
             title="状态"
-            :edit-render="{ name: 'VxeSelect', options: [{'value':0,'label':'请假'},{'value':1,'label':'正常服务'}], props: { multiple: false }, optionProps: { value: 'value', label: 'label' } }"
+            :edit-render="{
+              name: 'VxeSelect',
+              options: [
+                { value: 0, label: '请假' },
+                { value: 1, label: '正常服务' },
+              ],
+              props: { multiple: false },
+              optionProps: { value: 'value', label: 'label' },
+            }"
           />
 
           <vxe-column
@@ -130,7 +168,13 @@
             field="has_social_insurance"
             width="140"
             title="是否有社保"
-            :edit-render="{ name: 'VxeSelect', options: [{ label: '是', value: 1 },{ label: '否', value: 0 }] }"
+            :edit-render="{
+              name: 'VxeSelect',
+              options: [
+                { label: '是', value: 1 },
+                { label: '否', value: 0 },
+              ],
+            }"
           />
 
           <vxe-column
@@ -138,13 +182,21 @@
             field="has_qualification"
             width="140"
             title="是否有资质"
-            :edit-render="{ name: 'VxeSelect', options: [{ label: '是', value: 1 },{ label: '否', value: 0 }] }"
+            :edit-render="{
+              name: 'VxeSelect',
+              options: [
+                { label: '是', value: 1 },
+                { label: '否', value: 0 },
+              ],
+            }"
           />
         </vxe-table>
       </section>
 
       <div class="drawer-container__footer">
-        <el-button type="primary" :loading="loading" @click="submit">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
+        <el-button type="primary" :loading="loading" @click="submit">{{
+          loading ? "提交中 ..." : "确 定"
+        }}</el-button>
       </div>
     </el-drawer>
   </div>
@@ -154,7 +206,7 @@
 import { save } from '@/api/accompany-order/accompany-order'
 export default {
   props: {
-    visible: {
+    isShow: {
       type: Boolean,
       default: false
     },
@@ -165,31 +217,70 @@ export default {
   },
   data() {
     return {
+      nameOptions: [{ data: '' }],
+      mobileOptions: [{ data: '' }],
+      idcardOptions: [{ data: '' }],
       row: {},
-      loading: false
+      loading: false,
+      visible: false
     }
   },
   computed: {},
+  watch: {
+    'row': {
+      handler: function(newVal) {
+        if (newVal.nurse_id && this.isShow) {
+          this.$nextTick((_) => {
+            this.$refs['table'].setRadioRow(
+              this.nurses.find((i) => i.id === newVal.nurse_id)
+            )
+          })
+        }
+      },
+      deep: true
+    },
+    isShow(newVal) {
+      this.visible = newVal
+    },
+    visible(newVal) {
+      this.$emit('update:isShow', newVal)
+    }
+  },
   methods: {
+    changeFilterEvent(option) {
+      const $table = this.$refs.table
+      if ($table) {
+        $table.updateFilterOptionStatus(option, !!option.data)
+      }
+    },
+    nameFilterMethod({ option, cellValue }) {
+      const regex = new RegExp(option.data.split('').join('.*'), 'i')
+      return regex.test(cellValue)
+    },
     handleClose(done) {
       this.$confirm('确定关闭窗口？')
-        .then(_ => {
+        .then((_) => {
+          this.$refs['table'].clearRadioRow()
           done()
         })
-        .catch(_ => {})
+        .catch((_) => {})
     },
     submit() {
+      this.$confirm('确定分配？')
+        .then((_) => {
           if (this.row.id && this.$refs['table'].getRadioRecord(true)) {
             save({
               id: this.row.id,
               nurse_id: this.$refs['table'].getRadioRecord(true).id,
               status: 0
-        }).then(_ => {
+            }).then((_) => {
               this.$message.success('分配成功！')
               this.$emit('update:visible', false)
               this.$emit('refresh')
             })
           }
+        })
+        .catch((_) => {})
     }
   }
 }