factory_web/src/views/sys/labeltemplate.vue

<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="labelTemplateAdd"></el-button>
			</div>
			<div class="right-panel">
				<el-input v-model="query.search" placeholder="模板名称" clearable @keyup.enter="handleQuery"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
				<el-table-column label="#" type="index" width="50"></el-table-column>
				<el-table-column label="模板名称" prop="name" min-width="100"></el-table-column>
				<el-table-column label="创建时间" prop="description" min-width="150"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="140">
					<template #default="scope">
						<el-button link size="small" @click="labelTemplateEdit(scope.row)" type="primary">编辑</el-button>
						<el-divider direction="vertical"></el-divider>
						<el-popconfirm title="确定删除吗？" @confirm="labelTemplateDel(scope.row)">
							<template #reference>
								<el-button link size="small" type="danger">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
	<el-dialog :title="titleMap[type]" v-model="limitedVisible" :width="1000">
		<el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" label-position="left">
			<el-form-item label="模板名称" prop="name" auto>
				<el-input v-model="addForm.name" clearable></el-input>
			</el-form-item>
			<el-form-item label="模板代码" prop="commands" auto>
				<el-input v-model="addForm.commands" clearable :rows="9" type="textarea"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="limitedVisible=false" >取 消</el-button>
			<el-button v-if="type!=='show'" type="primary" :loading="isSaving" @click="submitHandle()">保 存</el-button>
		</template>
	</el-dialog>
</template>
<script>
	const defaultForm = {
		id:"",
		name: "",
		commands: "",
	};
	export default {
		name: 'labeltemplate',
		data() {
			return {
				apiObj: this.$API.cm.labeltemplate.list,
				selection: [],
				checkList: [],
				search: {
					keyword: null
				},
				query: {},
				isSaving: false,
				limitedVisible : false,
				type: "add",
				titleMap: {
					add: '新增',
					edit: '编辑',
					show: '查看'
				},

				//表单数据
				addForm: defaultForm,
				//验证规则
				rules: {
					name: [
						{required: true, message: '请输入模板名称'}
					],
				},
			}
		},
		mounted() {
		},
		methods: {
			//添加模板
			labelTemplateAdd(){
				this.limitedVisible = true;
				this.type = "add";
				this.$nextTick(()=>{
				})
				this.addForm = Object.assign({}, defaultForm);
			},
			submitHandle(){
				let that = this;
				this.$refs.addForm.validate( (valid) => {
					if (valid) {
						this.isSaveing = true;
						str = [
							"SIZE 70 mm,100 mm",
							"GAP 7 mm,7 mm",
							"CLS",
							"REFERENCE 0,0",
							'QRCODE 30,400,H,5,A,0,"' +code +'"',
							"WINTEXT 240,550,28,90,0,0,Simhei," + row.number,
							"PRINT 1",
						]; 
						let res;
						if(this.type==='add'){
							this.$API.system.labelTemplate.create.req(that.addForm).then(res=>{
								this.isSaveing = false;
								this.limitedVisible = false;
								this.$refs.table.refresh();
							}).catch(e=>{this.isSaveing = false;})
						}else{
							this.$API.system.labelTemplate.update.req(that.addForm.id,that.addForm).then(res=>{
								this.isSaveing = false;
								this.limitedVisible = false;
								this.$refs.table.refresh();
							}).catch(e=>{this.isSaveing = false;})
						}
					}
				})
			},

			//编辑模板
			labelTemplateEdit(row){
				this.type='edit';
				this.addForm.id=row.id;
				this.addForm.name=row.name;
				this.addForm.commands=row.commands;
				this.limitedVisible = true;
			},

			//删除模板
			async labelTemplateDel(row){
				var id = row.id;
				var res = await this.$API.system.labelTemplate.delete.req(id);
				if(res.err_msg){
					this.$message.error(res.err_msg)
				}else{
					this.$refs.table.refresh();
					this.$message.success("删除成功")
				}
			},
			//表格选择后回调事件
			selectionChange(selection){
				this.selection = selection;
			},
			//搜索
			handleQuery(){
				this.$refs.table.queryData(this.query)
			},
			//本地更新数据
			handleSaveSuccess(data, type){
				if(type=='add'){
					this.$refs.table.refresh()
				}else if(type=='edit'){
					this.$refs.table.refresh()
				}
			}
		}
	}
</script>