a4444444444444

本文介绍如何使用 ExtJS 框架搭建一个简单的“Hello World”应用,包括所需文件结构、目录设置及 HTML 文档的基本配置。
\n<li><code>extjs</code> contains the Ext JS 4 SDK files包含了Ext JS 4 SDK文件</li>\n<li><code>resources</code> contains additional CSS and image files which are responsible for the look and feel of the application, as well as other static resources (XML, JSON, etc.)包含额外的CSS和图像文件,这是负责的外观和感觉的应用程序,以及其他静态资源(XML,JSON等)</li>\n<li><code>index.html</code> is the entry-point HTML document是HTML文档的入口点</li>\n<li><code>app.js</code> contains your application's logic包含应用程序的逻辑</li>\n</ul>\n\n\n<p>Don't worry about creating all those directories at the moment.  For now lets just focus on creating the minimum amount of code necessary to get an Ext JS application up and running.\nTo do this we'll create a basic \"hello world\" Ext JS application called \"Hello Ext\".  First, create the following directory and files in your web root directory.</p>\n\n\n<p>不要担心所有这些目录创建的时刻。现在让我们专注于创建需要得到Ext JS的应用程序代码的最低金额和运行。要做到这一点,我们将创建一个基本的你好世界Ext JS的应用,被称为EXT。首先,在您的网站根目录中创建以下目录和文件。</p>\n\n<pre><code>- helloext\n    - app.js\n    - index.html\n</code></pre>\n\n<p>Then unzip the Ext JS 4 SDK to a directory named <code>extjs</code> in the <code>helloext</code> directory</p>\n\n<p>然后解压缩的Ext JS 4 SDK的一个名为<code>extjs</code>在<code>helloext</code>目录</p>\n\n<p>A typical Ext JS application is contained in a single HTML document - <code>index.html</code>.  Open <code>index.html</code> and insert the following html code:</p>\n\n<p>一个典型的Ext JS的应用程序包含在一个单一的HTML文档 - <code>index.html</code>.  打开 <code>index.html</code>和插入下面的HTML代码:
<template> <el-dialog :append-to-body="true" :title="titleText === 'Add' ? '新增' : '编辑'" v-if="hasLoaded" :close-on-click-modal="false" v-model="dialogVisible" width="1000px" center @close="handleDialogVisible" > <div class="line"></div> <!-- 主表单区域 --> <el-form ref="form" :model="form" label-width="120px" size="default" :rules="rules"> <el-form-item label="提成类型" prop="commissionType"> <el-radio-group v-model="form.commissionType"> <el-radio value="operation" @change="handleChanne">运营提成</el-radio> <el-radio value="channel" @change="handleChannelChange">渠道提成</el-radio> </el-radio-group> </el-form-item> <el-form-item label="负责人类型" prop="responsibleType"> <el-radio-group v-model="form.responsibleType"> <el-radio value="operator">运营人员</el-radio> <el-radio value="merchant" :key="`merchant-radio-${showMerchant}`" v-if="showMerchant">商户</el-radio> </el-radio-group> </el-form-item> <el-form-item label="负责人" prop="responsible"> <el-select v-model="form.responsible" placeholder="请输入商户名称或者ID"> <el-option v-for="item in responsibleOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> <el-form-item label="有效期开始时间" prop="validStartTime"> <el-date-picker v-model="form.validStartTime" type="datetime" placeholder="选择开始时间" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker> </el-form-item> <el-form-item label="有效期结束时间" prop="validEndTime"> <el-date-picker v-model="form.validEndTime" type="datetime" format="YYYY-MM-DD 23:59:59" placeholder="选择结束时间" value-format="YYYY-MM-DD" @change="handleEndDateChange" :disabled="isEndTimeDisabled" ></el-date-picker> <el-checkbox v-model="isUnlimited" class="radio-style-checkbox" @change="handleUnlimitedChange"> 不限 </el-checkbox> </el-form-item> </el-form> <!-- 商户操作区域 --> <el-button type="primary" @click="showMerchantForm(false)" style="margin: 10px 0"> 新增商户 </el-button> <el-table :data="merchantList" border> <el-table-column label="商户编码" prop="merchantCode" align="center" min-width="150" /> <el-table-column label="商户名称" prop="name" min-width="100" show-overflow-tooltip align="center" /> <el-table-column label="经纪公司" min-width="100" show-overflow-tooltip align="center"> <template #default="{ row }"> {{ row.brokerageText || '不限' }} </template> </el-table-column> <el-table-column label="销售区域" min-width="100" show-overflow-tooltip align="center"> <template #default="{ row }"> {{ row.salesArea.length > 0 ? row.salesArea .map((areaId) => { const area = this.salesAreaOptions.find((item) => item.id === areaId); return area ? area.name : ''; }) .filter(Boolean) .join('、') : '不限' }} </template> </el-table-column> <el-table-column label="提成比例" prop="commissionRatio" min-width="120" show-overflow-tooltip align="center" /> <el-table-column label="操作" width="150" align="center"> <template #default="{ row, $index }"> <div style="display: flex; justify-content: center; align-items: center; height: 100%; padding: 6px 0"> <el-button type="primary" link @click="showMerchantForm(true, row, $index)" style="color: #b29350">修改</el-button> <el-button type="primary" link @click="deleteMerchant($index)" style="color: #b29350">删除</el-button> </div> </template> </el-table-column> </el-table> <!-- 主表单按钮 --> <div class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="handleSave" v-if="titleText === 'Add'">保存</el-button> <el-button type="primary" @click="handleSave" v-if="titleText === 'Edit'">保存</el-button> </div> <el-dialog :title="isEditMerchant ? '修改商户' : '新增商户'" v-model="merchantFormVisible" width="600px" :close-on-click-modal="false" center> <div class="line"></div> <el-form ref="merchantForm" :model="merchantForm" label-width="100px" :rules="merchantRules"> <el-form-item label="商户" prop="id"> <el-select v-model="merchantForm.id" placeholder="请选择商户" @change="handleMerchantSelect" clearable multiple> <el-option v-for="item in merchantOptions" :key="item.id" :label="item.name" :value="item.id" /> </el-select> </el-form-item> <el-form-item label="销售区域" prop="salesArea"> <el-checkbox-group v-model="merchantForm.salesArea" :disabled="salesAreaUnlimited" @change="handleSalesAreaChange"> <el-checkbox v-for="item in salesAreaOptions" :key="item.id" :value="item.id" :label="item.name"> {{ item.name }} </el-checkbox> </el-checkbox-group> <el-checkbox v-model="salesAreaUnlimited" :value="true" style="position: absolute; right: 0; top: 1px" class="radio-style-checkbox" @change="handleSalesAreaUnlimited" > 不限 </el-checkbox> </el-form-item> <el-form-item label="经纪公司" prop="brokerageIds"> <el-checkbox-group v-model="merchantForm.brokerageIds" :disabled="brokerageUnlimited" @change="handleBrokerageSelect"> <el-checkbox v-for="item in userBrokerCompanies" :key="item.brokerCompanyId" :value="item.brokerCompanyId" :label="item.brokerCompanyAbbr" /> </el-checkbox-group> <el-checkbox v-model="brokerageUnlimited" value="true" class="radio-style-checkbox" style="position: absolute; right: 0; top: 1px" @change="handleBrokerageUnlimited" > 不限 </el-checkbox> </el-form-item> <el-form-item label="提成比例" prop="commissionRatio"> <el-input v-model.number="merchantForm.commissionRatio" placeholder="请输入提成比例" suffix-icon="el-icon-percentage" clearable></el-input> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="merchantFormVisible = false">取消</el-button> <el-button type="primary" @click="saveMerchant" v-if="isEditMerchant">保存</el-button> <el-button type="primary" @click="saveMerchant" v-else>保存</el-button> </span> </template> </el-dialog> </el-dialog> </template> <script> import _ from 'lodash'; import { ElMessageBox, ElMessage } from 'element-plus'; import { ArrowRight, ArrowLeft, Money } from '@element-plus/icons-vue'; import { userBrokerCompanyList } from '/@/api/admin/signer'; import { getListAll as merchantListAll } from '/@/api/admin/merchant'; export default { components: { ArrowRight, ArrowLeft }, props: { id: { type: String, default: '', }, titleText: { type: String, default: 'Add', // 默认为新增 }, }, data() { return { // 主弹窗状态 dialogVisible: true, hasLoaded: false, showMerchant: false, // 主表单数据 form: { commissionType: '', responsibleType: '', responsible: '', validStartTime: '', validEndTime: '', }, isUnlimited: false, isEndTimeDisabled: false, // 下拉选项数据 responsibleOptions: [], userBrokerCompanies: [], merchantOptions: [], // 销售区域数据源(包含ID和名称) salesAreaOptions: [ { id: 1, name: '香港' }, { id: 2, name: '澳门' }, { id: 3, name: '新加坡' }, { id: 4, name: '百慕大' }, ], // 商户列表数据 merchantList: [], currentEditIndex: -1, // 商户表单相关(适配多选) merchantFormVisible: false, isEditMerchant: false, merchantForm: { id: [], // 改为数组存储选中的商户ID(多选) name: '', // 存储选中的商户名称,用于显示 salesArea: [], // 销售区域ID数组 brokerageIds: [], // 经纪公司ID数组 brokerageText: '', // 经纪公司名称(文字) commissionRatio: null, }, salesAreaUnlimited: false, brokerageUnlimited: false, // 验证规则(调整商户选择的验证) rules: { commissionType: [{ required: true, message: '请选择提成类型', trigger: 'change' }], responsibleType: [{ required: true, message: '请选择负责人类型', trigger: 'change' }], responsible: [{ required: true, message: '请选择负责人', trigger: 'change' }], validStartTime: [{ required: true, message: '请选择有效期开始时间', trigger: 'change' }], validEndTime: [ { required: true, message: '请选择有效期结束时间', trigger: 'change', validator: (rule, value, callback) => { if (this.isUnlimited) { callback(); } else if (!value) { callback(new Error('请选择有效期结束时间')); } else { callback(); } }, }, ], }, merchantRules: { // 调整商户选择的验证规则,支持数组长度判断 id: [ { required: true, message: '请选择商户', trigger: ['blur', 'change'], validator: (rule, value, callback) => { if (Array.isArray(value) && value.length > 0) { callback(); } else { callback(new Error('请选择至少一个商户')); } }, }, ], salesArea: [ { required: true, message: '请选择销售区域或选择不限', trigger: ['blur', 'change'], validator: (rule, value, callback) => { if (this.salesAreaUnlimited || value.length > 0) { callback(); } else { callback(new Error('请选择销售区域或选择不限')); } }, }, ], brokerageIds: [ { required: true, message: '请选择经纪公司或选择不限', trigger: ['blur', 'change'], validator: (rule, value, callback) => { if (this.brokerageUnlimited || value.length > 0) { callback(); } else { callback(new Error('请选择经纪公司或选择不限')); } }, }, ], commissionRatio: [ { required: true, message: '请输入提成比例', trigger: 'blur' }, { type: 'number', min: 0, max: 100, message: '提成比例必须在0-100之间', trigger: 'blur' }, ], }, }; }, created() { this.initData(); // 加载经纪公司列表 userBrokerCompanyList().then((res) => { this.userBrokerCompanies = res.data || []; }); // 加载商户列表 merchantListAll().then((res) => { this.merchantOptions = (res.data || []).filter((item) => item.id !== 1); }); }, methods: { // 初始化数据(适配多选商户) initData() { // 模拟负责人数据 this.responsibleOptions = [ { value: 'merchant1', label: '商户1' }, { value: 'merchant2', label: '商户2' }, { value: 'operator1', label: '运营人员1' }, { value: 'operator2', label: '运营人员2' }, ]; // 模拟初始商户数据(id改为数组) this.merchantList = [ { merchantCode: 'MER001', id: [1, 2], name: '商户A、商户B', brokerageIds: ['1'], brokerageText: 'BWM经纪公司', salesArea: [1, 2], commissionRatio: 15, }, // { // merchantCode: 'MER002', // merchantId: [3], // 单个商户也用数组 // merchantNames: '商户C', // brokerageIds: [], // brokerageText: '不限', // salesArea: [], // commissionRatio: 8, // }, // { // merchantCode: 'MER003', // merchantId: [4, 5], // merchantNames: '商户D、商户E', // brokerageIds: ['2'], // brokerageText: 'BIB经纪公司', // salesArea: [3], // 新加坡的ID // commissionRatio: 12, // }, ]; this.hasLoaded = true; }, // 提成类型切换 handleChannelChange(val) { this.showMerchant = val === 'channel'; }, handleChanne(val) { this.showMerchant = val !== 'operation'; }, // 有效期结束日期处理 handleEndDateChange(selectedDate) { if (selectedDate) { this.form.validEndTime = `${selectedDate} 23:59:59`; } else { this.form.validEndTime = ''; } }, // 有效期不限切换 handleUnlimitedChange(val) { if (val) { this.form.validEndTime = ''; this.isEndTimeDisabled = true; } else { this.isEndTimeDisabled = false; } }, // 显示商户表单(适配多选) showMerchantForm(isEdit, row = null, index = -1) { this.isEditMerchant = isEdit; this.merchantFormVisible = true; this.currentEditIndex = index; // 重置表单 this.$nextTick(() => { if (this.$refs.merchantForm) { this.$refs.merchantForm.resetFields(); } }); if (isEdit && row) { this.merchantForm = { id: row.id, // 保留 ID 用于提交 name: row.name, // 显示名称,修改此处 salesArea: [...row.salesArea], brokerageIds: [...row.brokerageIds], brokerageText: row.brokerageText || '', commissionRatio: row.commissionRatio, }; this.salesAreaUnlimited = row.salesArea.length === 0; this.brokerageUnlimited = row.brokerageIds.length === 0; } else { // 新增状态:重置表单 this.merchantForm = { id: [], name: '', salesArea: [], brokerageIds: [], brokerageText: '', commissionRatio: null, }; this.salesAreaUnlimited = false; this.brokerageUnlimited = false; } }, // 选择商户后同步名称(适配多选) handleMerchantSelect(merchantIds) { if (!merchantIds || !merchantIds.length) { this.merchantForm.name = ''; return; } // 筛选所有选中的商户并拼接名称 const selectedMerchants = this.merchantOptions.filter((item) => merchantIds.includes(item.id)); this.merchantForm.name = selectedMerchants.map((item) => item.name).join('、'); }, // 选择经纪公司后同步文字名称 handleBrokerageSelect(ids) { if (!ids || ids.length === 0) { this.merchantForm.brokerageText = ''; return; } // 从所有经纪公司中筛选选中的项 const selectedBrokers = this.userBrokerCompanies.filter((item) => ids.includes(item.brokerCompanyId)); // 拼接选中的经纪公司简称 this.merchantForm.brokerageText = selectedBrokers.map((item) => item.brokerCompanyAbbr).join('、'); }, // 销售区域选择变化 handleSalesAreaChange() { if (this.merchantForm.salesArea.length > 0) { this.salesAreaUnlimited = false; } }, // 经纪公司选择变化 handleBrokerageChange() { if (this.merchantForm.brokerageIds.length > 0) { this.brokerageUnlimited = false; } }, // 销售区域不限切换 handleSalesAreaUnlimited(val) { if (val) { this.merchantForm.salesArea = []; } }, // 经纪公司不限切换 handleBrokerageUnlimited(val) { if (val) { this.merchantForm.brokerageIds = []; this.merchantForm.brokerageText = '不限'; } }, // 保存商户数据(适配多选) saveMerchant() { this.$refs.merchantForm.validate((valid) => { if (valid) { // 处理经纪公司文字显示(不限状态) const brokerageText = this.brokerageUnlimited ? '不限' : this.merchantForm.brokerageText; if (this.isEditMerchant && this.currentEditIndex !== -1) { // 修改操作 const updatedData = { ...this.merchantList[this.currentEditIndex], id: [...this.merchantForm.id], // 保存ID数组 name: this.merchantForm.name, // 保存名称拼接 salesArea: this.salesAreaUnlimited ? [] : [...this.merchantForm.salesArea], brokerageIds: this.brokerageUnlimited ? [] : [...this.merchantForm.brokerageIds], brokerageText, commissionRatio: this.merchantForm.commissionRatio, }; this.merchantList.splice(this.currentEditIndex, 1, updatedData); const params = { id: [...this.merchantForm.id], id: this.merchantForm.id, salesArea: this.salesAreaUnlimited ? [] : [...this.merchantForm.salesArea], brokerageIds: this.brokerageUnlimited ? [] : [...this.merchantForm.brokerageIds], commissionRatio: this.merchantForm.commissionRatio, }; console.log('9999999', params); // this.$http // .post(this.$api.merchant.config, params) // .then((res) => { // if (res.code == '1') { // this.$message.success('配置人员成功'); // this.$emit('onSuccess'); // } else { // this.$message.error(res.message); // } // }) // .catch((err) => { // this.$message.error('配置人员失败'); // this.$emit('onClose'); // }); ElMessage.success('商户修改成功'); } else { // 新增操作:生成唯一编码 const maxCode = this.merchantList.reduce((max, item) => { const num = parseInt(item.merchantCode?.replace('MER', '') || '0'); return num > max ? num : max; }, 0); const newCode = `MER${String(maxCode + 1).padStart(3, '0')}`; const newMerchant = { merchantCode: newCode, id: [...this.merchantForm.id], name: this.merchantForm.name, salesArea: this.salesAreaUnlimited ? [] : [...this.merchantForm.salesArea], brokerageIds: this.brokerageUnlimited ? [] : [...this.merchantForm.brokerageIds], brokerageText, commissionRatio: this.merchantForm.commissionRatio, }; this.merchantList.push(newMerchant); console.log('4444444444444', newMerchant); const params = { merchantCode: newCode, id: [...this.merchantForm.id], id: this.merchantForm.id, salesArea: this.salesAreaUnlimited ? [] : [...this.merchantForm.salesArea], brokerageIds: this.brokerageUnlimited ? [] : [...this.merchantForm.brokerageIds], commissionRatio: this.merchantForm.commissionRatio, }; console.log('22222222222', params); // this.$http // .post(this.$api.merchant.config, params) // .then((res) => { // if (res.code == '1') { // this.$message.success('配置人员成功'); // this.$emit('onSuccess'); // } else { // this.$message.error(res.message); // } // }) // .catch((err) => { // this.$message.error('配置人员失败'); // this.$emit('onClose'); // }); ElMessage.success('商户新增成功'); } this.merchantFormVisible = false; } }); }, // 删除商户 async deleteMerchant(index) { const result = await ElMessageBox.confirm(`确定要删除【${this.merchantList[index].name}】吗?`, '删除确认', { confirmButtonText: '确认删除', cancelButtonText: '取消', type: 'warning', }).catch(() => false); if (result) { this.merchantList.splice(index, 1); ElMessage.success('删除成功'); } }, // 保存主表单 handleSave() { this.$refs.form.validate((valid) => { if (valid) { if (this.merchantList.length === 0) { ElMessage.warning('请至少新增一条商户数据'); return; } // 构建提交数据(商户ID为数组) const submitData = { ...this.form, validEndTime: this.isUnlimited ? '' : this.form.validEndTime, merchantList: this.merchantList.map((merchant) => ({ ...merchant, id: merchant.id, // 提交ID数组 salesArea: merchant.salesArea, brokerageIds: merchant.brokerageIds, })), }; console.log('提交的数据:', submitData); ElMessage.success('保存成功'); this.$emit('onSuccess'); } }); }, // 关闭弹窗 handleDialogVisible() { this.$emit('onClose'); }, }, }; </script> <style lang="scss" scoped> ::v-deep .el-input { width: 240px; } ::v-deep .el-select { width: 240px; } .dialog-footer { display: flex; justify-content: center; margin-top: 20px; } /* 商户表单样式 */ ::v-deep .el-checkbox-group { margin-bottom: 10px; } /* 表格样式优化 */ ::v-deep .el-table { margin-bottom: 20px; } /* 操作按钮样式 */ ::v-deep .el-button--text { padding: 5px 10px; } ::v-deep .radio-style-checkbox { margin-left: 10px; .el-checkbox__inner { border-radius: 50% !important; /* 圆形边框 */ width: 16px !important; height: 16px !important; } .el-checkbox__inner::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; border-radius: 50%; background-color: #ffff; opacity: 0; } &.is-checked .el-checkbox__inner::after { opacity: 1; } } .line { margin-top: -20px; margin-bottom: 23px; border-bottom: 1px solid #3333 !important; } .text-btn { color: var(--el-color-primary); } </style> 把返显后商户返回的id修改成返回name
09-10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值