eta_front/src/views/dataEntry_manage/databaseComponents/replaceDialog.vue

<template>
  <el-dialog
    :visible.sync="isShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
		:append-to-body="true"
    @close="cancelHandle"
    custom-class="replace-dialog"
    center
    v-dialogDrag
		width="600px"
  >
    <div slot="title" style="display: flex; align-items: center">
      <img
        :src="$icons.editicon"
        style="color: #fff; width: 16px; height: 16px; marginright: 5px"
      />
      <span style="font-size: 16px">&nbsp;<!-- 替换指标 -->{{$t('EtaBasePage.replace_edb_btn')}}</span>
    </div>
    <el-form
      ref="diaForm"
      class="form-cont"
      label-position="left"
      label-width="120px"
      :model="formData"
      :rules="formRules"
    >
			<el-form-item :label="$t('EtaBasePage.origin_edb')" prop="oldEdb">
				<el-select
				v-model="formData.oldEdb"
				v-loadMore="searchLoad"
				:filterable="!formData.oldEdb"
				remote
				clearable
				:placeholder="$t('EtaBasePage.search_placeholder')"
				style="width: 440px"
				:remote-method="searchHandle"
				@click.native="inputFocusHandle"
				@blur="search_have_more = false"
				>
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
					<el-option
						v-for="item in searchOptions"
						:key="item.EdbInfoId"
						:label="$parent.currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
						:value="item.EdbInfoId"
					>
						<edbDetailPopover :info="item">
							<div slot="reference">{{$parent.currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName}}</div>
						</edbDetailPopover>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item :label="$t('EtaBasePage.replace')" prop="newEdb">
				<el-select
				v-model="formData.newEdb"
				v-loadMore="searchLoad"
				:filterable="!formData.newEdb"
				remote
				clearable
				:placeholder="$t('EtaBasePage.search_placeholder')"
				style="width: 440px"
				:remote-method="searchHandle"
				@click.native="inputFocusHandle"
				@blur="search_have_more = false"
				>
					<i slot="prefix" class="el-input__icon el-icon-search"/>
					<el-option
						v-for="item in searchOptions"
						:key="item.EdbInfoId"
						:label="$parent.currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
						:value="item.EdbInfoId"
					>
						<edbDetailPopover :info="item">
							<div slot="reference">{{$parent.currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName}}</div>
						</edbDetailPopover>
					</el-option>
				</el-select>
			</el-form-item>
    </el-form>
    <div class="dia-bot">
      <el-button
        type="primary"
        style="margin-right: 20px"
        @click="saveHandle"
        ><!-- 全部替换 -->{{$t('EtaBasePage.replace_all')}}</el-button
      >
      <el-button type="primary" plain @click="cancelHandle"><!-- 取消 -->{{$t('Dialog.cancel_btn')}}</el-button>
    </div>
		<p class="tip">{{$t('EtaBasePage.replace_tip')}}</p>
  </el-dialog>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js'; 
export default {
  props: {
		isShow: {
			type: Boolean,
		},
  },
  data() {
    return {
			formData: {
				oldEdb:'',
				newEdb: ''
			},
			formRules: {
				oldEdb:[
					{ required: true, message: this.$t('EtaBasePage.input_origin_vaild'), trigger: 'blur' },
				],
				newEdb:[
					{ required: true, message: this.$t('EtaBasePage.input_replace_vaild'), trigger: 'blur' },
				],
			},
			allOptions: [],
			searchOptions:[],//搜索到的筛选列表
			searchOptions2:[],//搜索到的筛选列表

			search_page: 1,
			search_have_more: false,
			current_search:'',
		};
  },
  methods: {
    cancelHandle() {
      this.$refs.diaForm.resetFields();

			this.searchOptions = [];
      this.$emit('cancel');
    },

		/* 搜索 */
		searchHandle(query) {
			this.search_page = 1;
			this.current_search = query;
			this.searchApi(this.current_search);
		},

		/* 聚焦获取当前检索 */
		inputFocusHandle(e) {
			this.search_page = 1;
			this.current_search = e.target.value;
			this.searchApi(this.current_search);
		},

		searchApi(query,page=1) {
			dataBaseInterface.targetSearchByPage({
				KeyWord:query,
				CurrentIndex: page
			}).then(res => {
				if(res.Ret !== 200) return

				const { List,Paging } = res.Data;
				this.search_have_more = page < Paging.Pages;
				this.searchOptions = page === 1 ? List : this.searchOptions.concat(List);

			})
		},

		searchLoad() {
			if(!this.search_have_more) return;
			this.searchApi(this.current_search,++this.search_page)
		},

    saveHandle() {
      this.$refs.diaForm.validate((valid) => {
        if (valid) {
					this.$confirm(this.$t('EtaBasePage.replace_success_msg'), '提示', {
						confirmButtonText: '是',
						cancelButtonText: '否',
						type: 'warning'
					}).then(() => {
						dataBaseInterface.edbReplace({
							NewEdbInfoId: this.formData.newEdb,
							OldEdbInfoId: this.formData.oldEdb,
						})
						this.cancelHandle();
					})
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss">
.replace-dialog {
  .el-form-item__content {
    margin-left: 0;
  }
  .el-input {
    width: 80%;
  }
  .dia-bot {
    margin: 52px 0 50px;
    display: flex;
    justify-content: center;
  }
	.tip {
		margin-bottom: 30px;
	}
}
</style>