baozhida_erp/src/views/purchase/PurchaseDetail.vue

<script setup lang="ts">
import { ref, reactive, nextTick, computed } from 'vue'
import Drawer from '@/components/Drawer/index.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ColumnProps } from '@/components/TableBase/interface/index'
import { generateRandom } from '@/utils/common'
import { ElMessage } from 'element-plus'
import * as XLSX from 'xlsx'

const isNew = ref(true)
const tableData = ref<any[]>([])
const formLabelWidth = ref('140px')
const ruleFormRef = ref<FormInstance>()
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)

const form = ref({
  id: '',
	T_name:'',
	T_model:'',
	T_spec:'',
	T_quantity: null as number | null,
	T_demand:'',
	T_remark:'',
	T_state:1,
	T_date:'',
	T_unit_price: null as number | null,
	T_amount: null as number | null,
	T_reference_site:'',
	T_reference_site_title:'',
	T_bit_number:'',
	T_packaging:'',
})

// 验证整数
const validateInteger = (rule: any, value: any, callback: any) => {
	if (value === '' || value === null || value === undefined) {
		callback()
		return
	}
	const num = Number(value)
	if (isNaN(num) || !Number.isInteger(num)) {
		callback(new Error('请输入整数'))
	} else if (num < 0) {
		callback(new Error('数量不能为负数'))
	} else {
		callback()
	}
}

// 验证小数（正数）
const validateDecimal = (rule: any, value: any, callback: any) => {
	if (value === '' || value === null || value === undefined) {
		callback()
		return
	}
	const num = Number(value)
	if (isNaN(num)) {
		callback(new Error('请输入有效的数字'))
	} else if (num < 0) {
		callback(new Error('价格不能为负数'))
	} else {
		callback()
	}
}

const rules = reactive<FormRules>({
	T_name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
	T_quantity: [
		{ required: true, message: '请输入数量', trigger: 'blur' },
		{ validator: validateInteger, trigger: 'blur' }
	],
	T_unit_price: [
		{ validator: validateDecimal, trigger: 'blur' }
	],
	T_amount: [
		{ validator: validateDecimal, trigger: 'blur' }
	]
})
const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80, align: 'center' },
  { prop: 'T_name', label: '名称', align: 'center' },
  { prop: 'T_bit_number', label: '位号', align: 'center', width: 100 },
  { prop: 'T_packaging', label: '封装', align: 'center', width: 100 },
  { prop: 'T_model', label: '型号', align: 'center', width: 100 },
  { prop: 'T_spec', label: '规格', align: 'center', width: 100 },
  { prop: 'T_quantity', label: '数量', align: 'center'},
  { prop: 'T_demand', label: '需求', align: 'center', width: 140 },
  { prop: 'T_date', label: '采购时间', align: 'center', width: 150 },
  { prop: 'T_unit_price', label: '采购单价', align: 'center', width: 120},
  { prop: 'T_amount', label: '采购金额', align: 'center', width: 120},
  { prop: 'T_reference_site', label: '参考网址', align: 'center', width: 140 },
  { prop: 'T_remark', label: '备注', align: 'center', width: 140 },
  { prop: 'T_state', label: '状态', align: 'center', width: 120 },
  { prop: 'operation', label: '操作', width: 160, fixed: 'right', align: 'center' }
]

const openProductionDetailed = (type: string, row?: any) => {
  isNew.value = type === 'new' ? true : false
  if (!isNew.value) {
    form.value = { ...row }
  }
  drawerRef.value?.openDrawer()
}
const callbackDrawer = (done: () => void) => {
  done()
  resetForm(ruleFormRef.value)
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const deletePurchaseDetail = (id: string) => {
  tableData.value = tableData.value.filter((item: any) => item.id !== id)
  emit('onPlanning', tableData.value)
}
const addPurchaseDetail = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      // 确保数据类型正确
      const formattedData = {
        ...form.value,
        T_quantity: form.value.T_quantity ? parseInt(form.value.T_quantity.toString()) : 0,
        T_unit_price: form.value.T_unit_price ? parseFloat(form.value.T_unit_price.toString()) : 0,
        T_amount: form.value.T_amount ? parseFloat(form.value.T_amount.toString()) : 0
      }
      
      if (isNew.value) {
        tableData.value.push({ ...formattedData, id: generateRandom() })
      } else {
        const index = tableData.value.findIndex(item => item.id === form.value.id)
        tableData.value[index] = { ...formattedData }
      }

      nextTick(() => {
        isNew.value = true
        drawerRef.value?.closeDrawer()
        resetForm(ruleFormRef.value)
		emit('onPlanning', tableData.value)
      })
    }
  })
}
const emit = defineEmits<{ (event: 'onPlanning', value: any): void }>()
const getDetailInfo = () => tableData.value
const clearDetail = () => (tableData.value = [])
const setDetailData = (info: any[]) => {
  tableData.value = info.map((item: any) => {
    item.id = generateRandom()
    return item
  })
}
defineExpose({
  getDetailInfo,
  clearDetail,
  setDetailData
})
const props = defineProps<{ disabled: boolean; isShow?: string;typeTip?:string }>()
const disabled = computed(() => props.disabled)
const isShow = ref(props.isShow)
const typeTip = ref(props.typeTip)

// 导入Excel文件
const importDialogVisible = ref(false)
const fileInputRef = ref<HTMLInputElement | null>(null)
const uploadFileList = ref<any[]>([])
const tempImportData = ref<any[]>([]) // 临时存储解析的数据

const handleImportExcel = () => {
	importDialogVisible.value = true
	uploadFileList.value = []
	tempImportData.value = []
}

// 下载模板
const handleDownloadTemplate = () => {
	const link = document.createElement('a')
	link.href = '/采购申请模版.xlsx'
	link.download = '采购申请模版.xlsx'
	link.click()
	ElMessage.success('模板下载成功')
}

// 解析Excel文件
const parseExcelFile = (file: File) => {
	const reader = new FileReader()
	reader.onload = (e) => {
		try {
			const data = e.target?.result
			const workbook = XLSX.read(data, { type: 'array' })
			
			// 读取第一个sheet
			const firstSheetName = workbook.SheetNames[0]
			const worksheet = workbook.Sheets[firstSheetName]
			
			// 将sheet转换为JSON
			const jsonData: any[] = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
			
			// 辅助函数：解码HTML实体
			const decodeHTMLEntities = (text: string): string => {
				const textarea = document.createElement('textarea')
				textarea.innerHTML = text
				return textarea.value
			}
			
			// 辅助函数：获取单元格超链接
			const getCellHyperlink = (worksheet: any, rowIndex: number, colIndex: number): string => {
				// 将列索引转换为Excel列字母（0->A, 1->B, ..., 10->K）
				const colLetter = String.fromCharCode(65 + colIndex)
				// Excel行号从1开始，但我们的数据从第2行开始（索引1对应Excel的第2行）
				const cellAddress = `${colLetter}${rowIndex + 1}`
				const cell = worksheet[cellAddress]
				
				// 检查单元格是否有超链接
				if (cell && cell.l && cell.l.Target) {
					// 解码HTML实体，将 &amp; 转换回 &
					return decodeHTMLEntities(cell.l.Target)
				}
				
				// 如果没有超链接，返回单元格的文本值
				// return cell ? (cell.v || '') : ''
				return ''
			}
			
			// 解析数据（从第2行开始，跳过标题行）
			const parsedData: any[] = []
			
			for (let i = 1; i < jsonData.length; i++) {
				const row = jsonData[i]
				if (!row || row.length === 0) continue
				
			// 获取参考网址的超链接（第11列，索引为10）
			const referenceSite = getCellHyperlink(worksheet, i, 10)
			
			// 数据类型转换
			const quantity = row[5] ? parseInt(row[5].toString()) : 0
			const unitPrice = row[8] ? parseFloat(row[8].toString()) : 0
			const amount = row[9] ? parseFloat(row[9].toString()) : 0
			
			// 根据Excel列映射到表单字段
			const item = {
				id: generateRandom(),
				T_name: row[1] || '', // 名称
				T_bit_number: row[2] || '', // 位号
				T_packaging: row[3] || '', // 封装
				T_model: '', // 型号
				T_spec: row[4] || '', // 规格
				T_quantity: quantity, // 数量（整数）
				T_demand: (row[6] !== undefined && row[6] !== null) ? row[6].toString() : '', // 需求（转换为字符串）
				T_unit_price: unitPrice, // 采购单价（小数）
				T_amount: amount, // 采购金额（小数）
				T_reference_site: referenceSite, // 参考网址（超链接）
				T_reference_site_title: row[10] || '', // 参考网址标题
				T_remark: row[11] || '', // 备注
				T_state: 1, // 状态：待采购
				T_date: '' // 采购时间
			}
			
			parsedData.push(item)
			}
			
			if (parsedData.length > 0) {
				tempImportData.value = parsedData
				ElMessage.success(`文件解析成功，共 ${parsedData.length} 条有效数据`)
			} else {
				ElMessage.warning('未找到有效数据')
			}
		} catch (error) {
			console.error('Excel解析错误:', error)
			ElMessage.error('Excel文件解析失败，请检查文件格式')
		}
	}
	
	reader.onerror = () => {
		ElMessage.error('文件读取失败')
	}
	
	reader.readAsArrayBuffer(file)
}

// 文件列表改变
const handleFileChange = (file: any, fileList: any[]) => {
	uploadFileList.value = fileList
	
	// 当文件被选中时，立即解析
	if (file && file.raw) {
		const isExcel = file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 
		                file.raw.type === 'application/vnd.ms-excel'
		if (!isExcel) {
			ElMessage.error('只能上传Excel文件!')
			uploadFileList.value = []
			return
		}
		parseExcelFile(file.raw)
	}
}

// 提交导入
const handleSubmitImport = () => {
	if (tempImportData.value.length === 0) {
		ElMessage.warning('请先上传Excel文件')
		return
	}
	
	// 将解析的数据添加到表格
	tableData.value.push(...tempImportData.value)
	ElMessage.success(`成功导入 ${tempImportData.value.length} 条数据`)
	emit('onPlanning', tableData.value)
	
	// 关闭对话框并清空数据
	importDialogVisible.value = false
	uploadFileList.value = []
	tempImportData.value = []
}

// 批量设置采购时间
const batchDateDialogVisible = ref(false)
const batchDate = ref('')

const handleBatchSetDate = () => {
	batchDateDialogVisible.value = true
	batchDate.value = ''
}

const confirmBatchSetDate = () => {
	if (!batchDate.value) {
		ElMessage.warning('请选择日期')
		return
	}
	
	tableData.value.forEach((item: any) => {
		item.T_date = batchDate.value
	})
	
	ElMessage.success('批量设置成功')
	emit('onPlanning', tableData.value)
	batchDateDialogVisible.value = false
}

// 处理表格内数据变化
const handleCellValueChange = (row: any, field: string, value: any) => {
	row[field] = value
	emit('onPlanning', tableData.value)
}

// 格式化数字显示，0值显示为空
const formatNumberDisplay = (value: any) => {
	if (value === 0 || value === '0' || value === null || value === undefined) {
		return ''
	}
	return value
}
</script>

<template>
  <el-table
    stripe
    :data="tableData"
    style="width: 100%"
    :header-cell-style="{
      background: 'rgb(225 226 228)',
      color: '#000'
    }"
  >
    <template v-for="item in columns" :key="item.prop">

		<!-- 状态列 -->
		<el-table-column
			v-if="item.prop === 'T_state'"
			:label="item.label"
			:width="item.width"
			align="center"
		>
			<template v-slot="scope">
				<template v-if="isShow !== 'myPurchase' && typeTip !== 'view'">
					<el-select 
						v-model="scope.row.T_state" 
						size="small"
						style="width: 100%"
						@change="handleCellValueChange(scope.row, 'T_state', scope.row.T_state)"
					>
						<el-option :label="'待采购'" :value="1" />
						<el-option :label="'已采购'" :value="2" />
					</el-select>
				</template>
				<template v-else>
					<el-text v-if="scope.row.T_state === 1" effect="dark">待采购</el-text>
					<el-text v-else type="success" effect="dark">已采购</el-text>
				</template>
			</template>
		</el-table-column>
		<el-table-column
			v-else-if="item.prop === 'T_reference_site'"
			:label="item.label"
			:width="item.width"
			align="center"
		>
			<template v-slot="scope">
				<!-- 如果有链接地址，显示为可点击链接 -->
				<a 
					v-if="scope.row.T_reference_site" 
					:href="scope.row.T_reference_site" 
					target="_blank" 
					style="color: #409eff; text-decoration: underline;"
				>
					{{ scope.row.T_reference_site_title || '参考网址' }}
				</a>
				<!-- 如果没有链接地址但有标题，显示纯文本 -->
				<span v-else-if="scope.row.T_reference_site_title">{{ scope.row.T_reference_site_title }}</span>
				<!-- 两者都没有，显示 - -->
				<span v-else>-</span>
			</template>
		</el-table-column>
		<!-- 采购时间可编辑列 -->
		<el-table-column
			v-else-if="item.prop === 'T_date' && isShow !== 'myPurchase'"
			:width="item.width"
			align="center"
		>
			<template #header>
				<span style="cursor: pointer; color: #409eff" @click="handleBatchSetDate" title="点击批量设置时间">
					{{ item.label }}
				</span>
			</template>
			<template v-slot="scope">
				<el-date-picker
					v-model="scope.row.T_date"
					type="date"
					placeholder="采购时间"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					size="small"
					style="width: 100%"
					:disabled="typeTip === 'view'"
					@change="handleCellValueChange(scope.row, 'T_date', scope.row.T_date)"
				/>
			</template>
		</el-table-column>
		<!-- 采购单价可编辑列 -->
		<el-table-column
			v-else-if="item.prop === 'T_unit_price' && isShow !== 'myPurchase'"
			:label="item.label"
			:width="item.width"
			align="center"
		>
			<template v-slot="scope">
				<el-input-number
					v-model="scope.row.T_unit_price"
					:min="0"
					:precision="2"
					:controls="false"
					size="small"
					style="width: 100%; text-align: left"
					:disabled="typeTip === 'view'"
					:placeholder="scope.row.T_unit_price === 0 ? '' : '请输入单价'"
					@change="handleCellValueChange(scope.row, 'T_unit_price', scope.row.T_unit_price)"
					@blur="scope.row.T_unit_price === 0 && (scope.row.T_unit_price = null)"
					@focus="scope.row.T_unit_price === null && (scope.row.T_unit_price = 0)"
				/>
			</template>
		</el-table-column>
		<!-- 采购金额可编辑列 -->
		<el-table-column
			v-else-if="item.prop === 'T_amount' && isShow !== 'myPurchase'"
			:label="item.label"
			:width="item.width"
			align="center"
		>
			<template v-slot="scope">
				<el-input-number
					v-model="scope.row.T_amount"
					:min="0"
					:precision="2"
					:controls="false"
					size="small"
					style="width: 100%; text-align: left"
					:disabled="typeTip === 'view'"
					:placeholder="scope.row.T_amount === 0 ? '' : '请输入金额'"
					@change="handleCellValueChange(scope.row, 'T_amount', scope.row.T_amount)"
					@blur="scope.row.T_amount === 0 && (scope.row.T_amount = null)"
					@focus="scope.row.T_amount === null && (scope.row.T_amount = 0)"
				/>
			</template>
		</el-table-column>
		<!-- 备注可编辑列 -->
		<el-table-column
			v-else-if="item.prop === 'T_remark' && isShow !== 'myPurchase'"
			:label="item.label"
			:width="item.width"
			align="center"
		>
			<template v-slot="scope">
				<el-input
					v-model="scope.row.T_remark"
					type="text"
					placeholder="请输入备注"
					size="small"
					:disabled="typeTip === 'view'"
					@change="handleCellValueChange(scope.row, 'T_remark', scope.row.T_remark)"
				/>
			</template>
		</el-table-column>
      <el-table-column show-overflow-tooltip v-bind="item" v-else-if="item.type === 'index'"></el-table-column>
      <el-table-column show-overflow-tooltip v-bind="item" v-else-if="item.fixed !== 'right' && item.type !== 'index'"> </el-table-column>
      <el-table-column show-overflow-tooltip v-bind="item" v-else-if="item.fixed === 'right' && isShow === 'myPurchase' && typeTip !== 'view'">
        <template #default="{ row }" >
          <el-button size="small" type="primary" @click="openProductionDetailed('edit', row)"
            >编辑</el-button
          >
          <el-button size="small" type="danger" @click="deletePurchaseDetail(row.id)"
            >删除</el-button>
        </template>
      </el-table-column>
    </template>
    <template #append v-if="isShow === 'myPurchase'">
      <el-button type="primary" :disabled="disabled" @click="openProductionDetailed('new')">
        <el-icon><Plus /></el-icon><span style="margin-left: 6px">添加</span>
      </el-button>
      <el-button type="success" :disabled="disabled" @click="handleImportExcel" style="margin-left: 10px">
        <el-icon><Plus /></el-icon><span style="margin-left: 6px">导入Excel</span>
      </el-button>
    </template>
  </el-table>
  
  <!-- 导入Excel对话框 -->
  <el-dialog
    v-model="importDialogVisible"
    title="导入Excel数据"
    width="500px"
    :close-on-click-modal="false"
  >
    <div style="margin-bottom: 20px">
      <el-alert
        title="请先下载模板，按照模板格式填写数据后上传"
        type="info"
        :closable="false"
        show-icon
      />
    </div>
    
    <div style="margin-bottom: 20px; text-align: center">
      <el-button type="primary" @click="handleDownloadTemplate">
        <el-icon><Download /></el-icon>
        <span style="margin-left: 6px">下载模板</span>
      </el-button>
    </div>
    
    <el-upload
      drag
      :file-list="uploadFileList"
      :on-change="handleFileChange"
      :auto-upload="false"
      accept=".xlsx,.xls"
      :limit="1"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        将文件拖到此处，或<em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          只能上传 xlsx/xls 文件
        </div>
      </template>
    </el-upload>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSubmitImport">提交</el-button>
        <el-button @click="importDialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 批量设置采购时间对话框 -->
  <el-dialog
    v-model="batchDateDialogVisible"
    title="批量设置采购时间"
    width="400px"
    :close-on-click-modal="false"
  >
    <el-form label-width="100px">
      <el-form-item label="采购时间：">
        <el-date-picker
          v-model="batchDate"
          type="date"
          placeholder="请选择采购时间"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 100%"
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirmBatchSetDate">确定</el-button>
        <el-button @click="batchDateDialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
  <Drawer ref="drawerRef" :handleClose="callbackDrawer">
    <template #header="{ params }">
      <h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '添加' : '编辑' }} - 采购明细</h4>
    </template>

    <el-form ref="ruleFormRef" :model="form" :rules="rules">
      <el-form-item label="名称：" :label-width="formLabelWidth" prop="T_name">
        <el-input v-model="form.T_name" type="text" autocomplete="off" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="位号：" :label-width="formLabelWidth" prop="T_bit_number">
        <el-input v-model="form.T_bit_number" type="text" autocomplete="off" placeholder="请输入位号" />
      </el-form-item>
      <el-form-item label="封装：" :label-width="formLabelWidth" prop="T_packaging">
        <el-input v-model="form.T_packaging" type="text" autocomplete="off" placeholder="请输入封装" />
      </el-form-item>
      <el-form-item label="型号：" :label-width="formLabelWidth" prop="T_model">
        <el-input v-model="form.T_model" type="text" autocomplete="off" placeholder="请输入型号" />
      </el-form-item>
      <el-form-item label="规格：" :label-width="formLabelWidth" prop="T_spec">
        <el-input v-model="form.T_spec" type="text" autocomplete="off" placeholder="请输入规格" />
      </el-form-item>
		<el-form-item label="数量：" :label-width="formLabelWidth" prop="T_quantity">
			<el-input-number 
				v-model="form.T_quantity" 
				:min="0" 
				:precision="0" 
				:controls="false" 
				placeholder="请输入数量" 
				style="width: 100%; text-align: left"
				@blur="form.T_quantity === 0 && (form.T_quantity = null)"
				@focus="form.T_quantity === null && (form.T_quantity = 0)"
			/>
		</el-form-item>
		<el-form-item label="参考网址：" :label-width="formLabelWidth" prop="T_reference_site">
			<el-input v-model="form.T_reference_site" type="text" autocomplete="off" placeholder="请输入参考网址" />
		</el-form-item>
		<el-form-item label="需求：" :label-width="formLabelWidth" prop="T_demand">
			<el-input v-model="form.T_demand" type="text" autocomplete="off" placeholder="请输入需求" />
		</el-form-item>
		<el-form-item label="备注：" :label-width="formLabelWidth" prop="T_remark">
			<el-input v-model="form.T_remark" type="text" autocomplete="off" placeholder="请输入备注" />
		</el-form-item>
		<el-form-item v-if="isShow !== 'myPurchase'" label="状态：" :label-width="formLabelWidth" prop="T_state">
			<el-radio-group v-model="form.T_state">
				<el-radio :label="1">待采购</el-radio>
				<el-radio :label="2">已采购</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item v-if="isShow !== 'myPurchase'" label="采购时间：" :label-width="formLabelWidth" prop="T_date">
			<el-date-picker
				style="flex: 0 0 50%"
				class="my-date-picker"
				v-model="form.T_date"
				type="date"
				placeholder="采购时间"
				format="YYYY-MM-DD"
				value-format="YYYY-MM-DD"
			/>
		</el-form-item>
		<el-form-item label="采购单价：" :label-width="formLabelWidth" prop="T_unit_price">
			<el-input-number 
				v-model="form.T_unit_price" 
				:min="0" 
				:precision="2" 
				:controls="false" 
				placeholder="请输入采购单价" 
				style="width: 100%; text-align: left"
				@blur="form.T_unit_price === 0 && (form.T_unit_price = null)"
				@focus="form.T_unit_price === null && (form.T_unit_price = 0)"
			/>
		</el-form-item>
		<el-form-item  label="采购金额：" :label-width="formLabelWidth" prop="T_amount">
			<el-input-number 
				v-model="form.T_amount" 
				:min="0" 
				:precision="2" 
				:controls="false" 
				placeholder="请输入采购金额" 
				style="width: 100%; text-align: left"
				@blur="form.T_amount === 0 && (form.T_amount = null)"
				@focus="form.T_amount === null && (form.T_amount = 0)"
			/>
		</el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-button v-if="isNew" class="btn"  type="primary" @click="addPurchaseDetail(ruleFormRef)"
          >添加</el-button
        >
        <el-button v-else class="btn" type="primary" @click="addPurchaseDetail(ruleFormRef)"
          >修改</el-button
        >
      </el-form-item>
    </el-form>
  </Drawer>
</template>

<style scoped lang="scss">
:deep(.el-drawer__body .el-table .cell) {
  white-space: normal !important;
}
.el-form-item {
  margin-bottom: 18px;
}

// 数字输入框样式优化
:deep(.el-input-number) {
  .el-input__inner {
    text-align: left !important;
  }
  
  // 当值为0时隐藏显示
  &.is-empty .el-input__inner {
    color: transparent;
  }
}

// 表格中的数字输入框
:deep(.el-table .el-input-number) {
  .el-input__inner {
    text-align: left !important;
    border: none;
    background: transparent;
    padding: 0 8px;
  }
  
  &:hover .el-input__inner {
    background: #f5f7fa;
  }
  
  &.is-focus .el-input__inner {
    background: #fff;
    border: 1px solid #409eff;
  }
}
</style>