|
|
@@ -0,0 +1,213 @@
|
|
|
+<template>
|
|
|
+ <a-modal
|
|
|
+ :title="modalTitle"
|
|
|
+ :width="800"
|
|
|
+ :visible="visible"
|
|
|
+ :confirmLoading="confirmLoading"
|
|
|
+ @cancel="handleCancel"
|
|
|
+ >
|
|
|
+ <a-form :form="form">
|
|
|
+ <a-alert
|
|
|
+ v-if="record.repairUserName"
|
|
|
+ message=""
|
|
|
+ type="info"
|
|
|
+ style="margin-bottom: 16px"
|
|
|
+ >
|
|
|
+ <template slot="description">
|
|
|
+ 当前维修人:<b>{{ record.repairUserName }}</b>,转派后将进入<b>转派审批中</b>状态,审批通过后更换维修人。
|
|
|
+ </template>
|
|
|
+ </a-alert>
|
|
|
+ <row-list :col="2">
|
|
|
+ <row-item>
|
|
|
+ <a-form-item
|
|
|
+ label="新维修负责人"
|
|
|
+ :labelCol="BaseTool.Constant.labelCol"
|
|
|
+ :wrapperCol="BaseTool.Constant.wrapperCol"
|
|
|
+ >
|
|
|
+ <div style="position: relative;">
|
|
|
+ <a-input
|
|
|
+ v-model="searchKeyword"
|
|
|
+ placeholder="点击选择新维修负责人"
|
|
|
+ readonly
|
|
|
+ @click="showDropdown = !showDropdown"
|
|
|
+ >
|
|
|
+ <a-icon
|
|
|
+ slot="suffix"
|
|
|
+ type="down"
|
|
|
+ @click="showDropdown = !showDropdown"
|
|
|
+ />
|
|
|
+ </a-input>
|
|
|
+ <div
|
|
|
+ v-if="showDropdown"
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ top: 100%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
|
+ max-height: 300px;
|
|
|
+ overflow-y: auto;
|
|
|
+ z-index: 1000;
|
|
|
+ margin-top: 4px;
|
|
|
+ "
|
|
|
+ @mouseleave="onDropdownMouseLeave"
|
|
|
+ >
|
|
|
+ <div style="padding: 8px; border-bottom: 1px solid #f0f0f0; position: sticky; top: 0; background: #fff; z-index: 1;">
|
|
|
+ <a-input
|
|
|
+ v-model="filterKeyword"
|
|
|
+ placeholder="搜索姓名"
|
|
|
+ size="small"
|
|
|
+ @click.stop
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-for="item in filteredDeptUserList"
|
|
|
+ :key="item.userId"
|
|
|
+ @click="selectUser(item)"
|
|
|
+ :style="{
|
|
|
+ padding: '8px 12px',
|
|
|
+ cursor: 'pointer',
|
|
|
+ background: selectedUserId === item.userId ? '#e6f7ff' : 'transparent'
|
|
|
+ }"
|
|
|
+ @mouseenter="($event.target.style.background = selectedUserId === item.userId ? '#e6f7ff' : '#f5f5f5')"
|
|
|
+ @mouseleave="($event.target.style.background = selectedUserId === item.userId ? '#e6f7ff' : 'transparent')"
|
|
|
+ >
|
|
|
+ {{ item.realName }}
|
|
|
+ </div>
|
|
|
+ <div v-if="filteredDeptUserList.length === 0" style="padding: 16px; text-align: center; color: #999;">
|
|
|
+ 无匹配结果
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+ </row-item>
|
|
|
+ </row-list>
|
|
|
+ <row-list :col="1">
|
|
|
+ <row-item>
|
|
|
+ <a-form-item
|
|
|
+ label="转派备注"
|
|
|
+ :labelCol="BaseTool.Constant.labelCol2"
|
|
|
+ :wrapperCol="BaseTool.Constant.wrapperCol2"
|
|
|
+ >
|
|
|
+ <a-textarea
|
|
|
+ :rows="4"
|
|
|
+ v-decorator="['repairDispatchRemark', {rules: [{required: true, message: '转派备注不能为空'}]}]"
|
|
|
+ placeholder="请填写转派原因"/>
|
|
|
+ </a-form-item>
|
|
|
+ </row-item>
|
|
|
+ </row-list>
|
|
|
+ </a-form>
|
|
|
+ <template slot="footer">
|
|
|
+ <a-button :loading="confirmLoading" type="primary" @click="save()">提交转派</a-button>
|
|
|
+ </template>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { transfer } from '@/api/repair/application-form'
|
|
|
+import { queryUserDept } from '@/api/upms/user-dept'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'TransferForm',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ confirmLoading: false,
|
|
|
+ modalTitle: null,
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ visible: false,
|
|
|
+ record: {},
|
|
|
+ deptUserList: [],
|
|
|
+ showDropdown: false,
|
|
|
+ searchKeyword: '',
|
|
|
+ filterKeyword: '',
|
|
|
+ selectedUserId: null,
|
|
|
+ selectedUserName: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ filteredDeptUserList () {
|
|
|
+ if (!this.filterKeyword) {
|
|
|
+ return this.deptUserList
|
|
|
+ }
|
|
|
+ return this.deptUserList.filter(item =>
|
|
|
+ item.realName.toLowerCase().includes(this.filterKeyword.toLowerCase())
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getDeptUsers()
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ document.addEventListener('click', this.handleDocumentClick)
|
|
|
+ },
|
|
|
+ beforeDestroy () {
|
|
|
+ document.removeEventListener('click', this.handleDocumentClick)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleDocumentClick (e) {
|
|
|
+ if (this.showDropdown && !e.target.closest('.ant-input-affix-wrapper')) {
|
|
|
+ this.showDropdown = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onDropdownMouseLeave () {
|
|
|
+ },
|
|
|
+ selectUser (item) {
|
|
|
+ this.selectedUserId = item.userId
|
|
|
+ this.selectedUserName = item.realName
|
|
|
+ this.searchKeyword = item.realName
|
|
|
+ this.showDropdown = false
|
|
|
+ this.form.setFieldsValue({ repairUserId: item.userId })
|
|
|
+ },
|
|
|
+ base (record) {
|
|
|
+ this.visible = true
|
|
|
+ this.modalTitle = '转派维修单'
|
|
|
+ this.record = record
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.form.resetFields()
|
|
|
+ this.selectedUserId = null
|
|
|
+ this.selectedUserName = ''
|
|
|
+ this.searchKeyword = ''
|
|
|
+ this.filterKeyword = ''
|
|
|
+ this.showDropdown = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getDeptUsers () {
|
|
|
+ queryUserDept({ deptCode: this.DictCache.VALUE.SYS_DEPT_CODE.XIAN_CHANG_WEI_XIU_ZU, userStatus: 1 }).then(res => {
|
|
|
+ queryUserDept({ deptCode: this.DictCache.VALUE.SYS_DEPT_CODE.CHANG_NEI_WEI_XIU_ZU, userStatus: 1 }).then(res2 => {
|
|
|
+ this.deptUserList = res.data.concat(res2.data)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ save () {
|
|
|
+ if (!this.selectedUserId) {
|
|
|
+ this.$message.warning('请选择新维修负责人')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const values = {
|
|
|
+ id: this.record.id,
|
|
|
+ repairUserId: this.selectedUserId,
|
|
|
+ repairDispatchRemark: this.form.getFieldValue('repairDispatchRemark')
|
|
|
+ }
|
|
|
+ this.confirmLoading = true
|
|
|
+ transfer(values)
|
|
|
+ .then(() => {
|
|
|
+ this.$message.success('转派已提交,等待审批')
|
|
|
+ this.handleCancel(values)
|
|
|
+ }).catch(() => {
|
|
|
+ this.confirmLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCancel (values) {
|
|
|
+ this.visible = false
|
|
|
+ this.confirmLoading = false
|
|
|
+ this.form.resetFields()
|
|
|
+ if (this.BaseTool.Object.isNotBlank(values)) {
|
|
|
+ this.$emit('ok')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|