baozhida_erp/src/views/projectFiling/ProjectFilingManager.vue

<script setup lang="ts">
import {ProjectFiling_Add, ProjectFiling_Del, ProjectFiling_Edit, ProjectFiling_List,} from '@/api/projectFiling/index'
import {nextTick, reactive, ref} from 'vue'
import Upload from '@/components/Upload/index.vue'
import Drawer from '@/components/Drawer/index.vue'
import TableBase from '@/components/TableBase/index.vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage, ElMessageBox} from 'element-plus'
import {Delete, Edit} from '@element-plus/icons-vue'
import type {ColumnProps} from '@/components/TableBase/interface/index'
import {options3, useTablePublic} from '@/hooks/useTablePublic'

const isNew = ref(true)
const formLabelWidth = ref('120px')
const ruleFormRef = ref<FormInstance>()
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const uploadRef = ref<InstanceType<typeof Upload> | null>(null)
const {resetForm, globalStore, searchOnTableList, updateOnTableList} = useTablePublic()

const columns: ColumnProps[] = [
	{type: 'index', label: '序号', width: 80},
	{prop: 'T_date', label: '备案时间'},
	{prop: 'T_sales_personnel', label: '销售人员'},
	{prop: 'T_customers', label: '客户名称'},
	{prop: 'T_customers_type', label: '客户类型'},
	{prop: 'T_service_type', label: '服务类型'},
	{prop: 'T_content', label: '具体内容'},
	{prop: 'T_estimate_contract_amount', label: '预计合同金额'},
	{prop: 'T_sign_bill_time', label: '预计签单时间'},
	{prop: 'T_prepare_content', label: '提前准备内容'},
	{prop: 'T_remark', label: '备注'},
	{prop: 'operation', label: '操作', width: 150, fixed: 'right'}
]

const rules = reactive<FormRules>({
	T_date: [{required: true, message: '请输入备案时间', trigger: 'blur'}],
	T_sales_personnel: [{required: true, message: '请输入销售人员', trigger: 'blur'}],
	T_customers: [{required: true, message: '请输入客户名称', trigger: 'blur'}],
})
const form: any = ref({
	T_id: '',
	T_date: '',
	T_sales_personnel: '',
	T_customers: '',
	T_customers_type: '',
	T_service_type: '',
	T_content: '',
	T_estimate_contract_amount: '',
	T_sign_bill_time: '',
	T_prepare_content: '',
	T_remark: '',
})

const openDrawer = (type: string, row?: any) => {
	isNew.value = type === 'new' ? true : false
	if (type == 'edit') {
		form.value.T_id = row.Id
		form.value.T_date                     = row.T_date                    
		form.value.T_sales_personnel          = row.T_sales_personnel         
		form.value.T_customers                = row.T_customers               
		form.value.T_customers_type           = row.T_customers_type          
		form.value.T_service_type             = row.T_service_type            
		form.value.T_content                  = row.T_content                 
		form.value.T_estimate_contract_amount = row.T_estimate_contract_amount
		form.value.T_sign_bill_time           = row.T_sign_bill_time          
		form.value.T_prepare_content          = row.T_prepare_content         
		form.value.T_remark                   = row.T_remark
	} else {
		delete form.value.T_id
		form.value.T_date                     = ''
		form.value.T_sales_personnel          = ''
		form.value.T_customers                = ''
		form.value.T_customers_type           = ''
		form.value.T_service_type             = ''
		form.value.T_content                  = ''
		form.value.T_estimate_contract_amount = ''
		form.value.T_sign_bill_time           = ''
		form.value.T_prepare_content          = ''
		form.value.T_remark                   = ''

	}
	drawerRef.value?.openDrawer()
}

const AddProduction = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate(async (valid: boolean) => {
		if (valid) {
			let res: any = {}
			if (isNew.value) {//新增
				res = await ProjectFiling_Add({User_tokey: globalStore.GET_User_tokey, ...form.value})
			} else {//编辑
				res = await ProjectFiling_Edit({
					User_tokey: globalStore.GET_User_tokey,
					...form.value,
				})
			}
			if (res.Code === 200) {
				ElMessage.success(`项目备案${isNew.value ? '添加' : '修改'}成功！！`)
				nextTick(() => {
					drawerRef.value?.closeDrawer()
					updateOnTableList(TableRef.value)
					resetForm(ruleFormRef.value)
					isNew.value = true
				})
			}
		}
	})
}

const ProductDelete = (row: any) => {
	ElMessageBox.confirm('您确定要删除该项目备案吗?', '警告', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(async () => {
			const res: any = await ProjectFiling_Del({
				User_tokey: globalStore.GET_User_tokey,
				T_id: row.Id
			})
			if (res.Code === 200) {
				ElMessage.success('删除成功！')
				nextTick(() => updateOnTableList(TableRef.value))
			}
		})
		.catch(() => {
			ElMessage.warning('取消成功！')
		})
}

const callbackDrawer = (done: () => void) => {
	resetForm(ruleFormRef.value)
	uploadRef.value?.clearfileList()
	done()
}
// 搜索
const initParam = reactive({
	User_tokey: globalStore.GET_User_tokey,
	T_sales_personnel: '',
	T_customers: ''
})

const options = ref<any[]>([
	{
		value: '医药公司',
		label: '医药公司',
	},
	{
		value: '连锁药店',
		label: '连锁药店',
	},
	{
		value: '疾控中心',
		label: '疾控中心',
	},
	{
		value: '医院',
		label: '医院',
	},
	{
		value: '药厂',
		label: '药厂',
	},
])
const options2 = ref<any[]>([
	{
		value: '传统业务',
		label: '传统业务',
	},
	{
		value: '创新业务',
		label: '创新业务',
	}
])
</script>

<template>
	<div class="production-list">
		<TableBase ref="TableRef" :columns="columns" :requestApi="ProjectFiling_List" :initParam="initParam">
			<template #table-header>
				<div class="input-suffix">
					<el-row :gutter="20" style="margin-bottom: 0">
						<el-col :xl="6" :lg="8" :md="10">
							<span class="inline-flex items-center">销售人员：</span>
							<el-input
								v-model="initParam.T_sales_personnel"
								type="text"
								class="w-50 m-2"
								placeholder="按销售人员搜索"
								@change="searchOnTableList(TableRef)"
							/>
						</el-col>
						<el-col :xl="6" :lg="8" :md="10">
							<span class="inline-flex items-center">客户名称：</span>
							<el-input
								v-model="initParam.T_customers"
								type="text"
								class="w-50 m-2"
								placeholder="按客户名称搜索"
								@change="searchOnTableList(TableRef)"
							/>
							<el-button type="primary" @click="searchOnTableList(TableRef)">搜索</el-button>
						</el-col>
					</el-row>
				</div>
			</template>
			<template #right="{ row }">
				<el-button link type="primary" size="small" :icon="Edit" @click="openDrawer('edit', row)">编辑
				</el-button>
				<el-button link type="danger" size="small" :icon="Delete" @click="ProductDelete(row)">删除</el-button>
			</template>
		</TableBase>
		<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_date">
					<el-date-picker
						style="flex: 0 0 60%"
						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_sales_personnel">
					<el-input class="w-50" v-model="form.T_sales_personnel" type="text" autocomplete="off"
							  placeholder="请填写销售人员"/>
				</el-form-item>
				<el-form-item label="客户名称：" :label-width="formLabelWidth" prop="T_customers">
					<el-input class="w-50" v-model="form.T_customers" type="text" autocomplete="off"
							  placeholder="请填写客户名称"/>
				</el-form-item>
				<el-form-item label="客户类型：" :label-width="formLabelWidth" prop="T_customers_type">
					<el-select class="w-50" v-model="form.T_customers_type" clearable filterable allow-create :reserve-keyword="false" placeholder="请填写客户类型">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
					</el-select>
				</el-form-item>
				<el-form-item label="服务类型：" :label-width="formLabelWidth" prop="T_service_type">
					<el-select class="w-50" v-model="form.T_service_type" clearable filterable allow-create :reserve-keyword="false" placeholder="请填写服务类型">
						<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"/>
					</el-select>
				</el-form-item>
				<el-form-item label="具体内容：" :label-width="formLabelWidth" prop="T_content">
					<el-input class="w-50" v-model="form.T_content" type="text" autocomplete="off"
							  placeholder="请填写具体内容"/>
				</el-form-item>
				<el-form-item label="预计合同金额：" :label-width="formLabelWidth"
							  prop="T_estimate_contract_amount">
					<el-input class="w-50" v-model="form.T_estimate_contract_amount" type="text" autocomplete="off"
							  placeholder="请填写预计合同金额"/>
				</el-form-item>
				<el-form-item label="预计签单时间：" :label-width="formLabelWidth" prop="T_sign_bill_time">
					<el-input class="w-50" v-model="form.T_sign_bill_time" type="text" autocomplete="off"
							  placeholder="请填写预计签单时间"/>
				</el-form-item>
				<el-form-item label="提前准备内容：" :label-width="formLabelWidth"
							  prop="T_prepare_content">
					<el-input class="w-50" v-model="form.T_prepare_content" type="text" autocomplete="off"
							  placeholder="请填写提前准备内容"/>
				</el-form-item>
				<el-form-item label="备注：" :label-width="formLabelWidth" prop="T_remark">
					<el-input class="w-50" v-model="form.T_remark" type="text" autocomplete="off"
							  placeholder="请填写备注"/>
				</el-form-item>


				<el-form-item :label-width="formLabelWidth">
					<el-button v-if="isNew" color="#626aef" @click="AddProduction(ruleFormRef)">提交</el-button>
					<el-button v-else color="#626aef" @click="AddProduction(ruleFormRef)">修改</el-button>
				</el-form-item>
			</el-form>
		</Drawer>
	</div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';

.tooltip-content {
	max-width: 500px;
	overflow-y: auto;
}

.production-list {
	@include f-direction;

	.input-suffix {
		width: 100%;

		.inline-flex {
			white-space: nowrap;
		}

		.btn {
			display: flex;
			justify-content: end;
		}

		.w-50 {
			width: 12.5rem;
		}
	}
	.w-50 {
		flex: 0 0 60%;
	}
}
</style>