yangchunlong/new_wms_admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 🚀 店铺资料接口联调

Browse Source
This commit is contained in:
yangchunlong
2025-10-30 13:58:56 +08:00
parent da31b2d347
commit 1208835216
12 changed files with 335 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/api/modules/antiCode.ts
View File

@@ -1,25 +0,0 @@
import http from "@/api";
import { ResPage } from "@/api/interface/index";
/**
* @name 防伪码模块
*/
//防伪码记录列表
export const getListApi = (params: Record<string, any>) => {
return http.post<ResPage<any>>(`SecurityNumber/GetGenerateRecordList`, params);
};
//生成防伪码
export const getGenerateSecurityNumberApi = (params: Record<string, any>) => {
return http.post<ResPage<any>>(`SecurityNumber/Generate`, params);
};
//防伪码下载列表 getDownListApi
export const getDownListApi = (params: Record<string, any>) => {
return http.post<ResPage<any>>(`SecurityNumber/GetList`, params);
};
//下载
export const getDownAllApi = (params: Record<string, any>) => {
return http.post<ResPage<any>>(`SecurityNumber/Export`, params);
};
//选择下载
export const getDownApi = (params: Record<string, any>) => {
return http.post<ResPage<any>>(`SecurityNumber/Export`, params);
};

110
src/api/modules/barCode.ts
View File

@@ -1,110 +0,0 @@
import http from "@/api";
import { ResPage } from "@/api/interface/index";
/**
* @name 打印产品条码模块
*/
//产品条码生成记录列表
export const getListApi = (params: Record<string, any>) => {
// console.log(params);
// return {
// isSuccess: true,
// message: "Success",
// status: 200,
// totalCount: 1,
// data: [
// {
// id: 17372,
// specifications: "ORICO-H7013-U3-AD-EU-BK-BP",
// materialNumber: "G01-43-552867",
// materialName: "7口USB3.0集线器",
// barCode: "6936761881968",
// purchaseBillNo: "ceshi1224",
// generateComplete: "已完成",
// number: 300,
// printNumber: 0,
// downLoadNumber: 300,
// useNumber: 2,
// creator: "admin",
// createTime: "2024-12-24 10:27:04",
// generateCompleteTime: "2024-12-24 10:27:05",
// supplierOrOrg: "深圳市元创时代科技有限公司",
// isUpdateMaterial: false,
// isTwo: 2
// }
// ]
// };
return http.post<ResPage<any>>(`SerialNumber/GetGenerateRecordList`, params);
};
//产品条码列表
export const getCodeListApi = (params: Record<string, any>) => {
// console.log(params);
// return {
// totalCount: 300,
// data: [
// {
// materialNumber: "G01-43-552867",
// materialName: "7口USB3.0集线器",
// specifications: "ORICO-H7013-U3-AD-EU-BK-BP",
// old_Specifications: "",
// barCode: "6936761881968",
// serialNumber: "10FC-616M3R",
// twoSerialNumber: "10FC-616M3R-two",
// numberCode: "241224000417",
// id: 202593401,
// number: 300,
// isUse: false,
// isUseStr: "否",
// box: "",
// creator: "admin",
// createTime: "2024-12-24 10:27:05",
// printNumber: 0,
// downLoadNumber: 1,
// printTime: "",
// downLoadTime: "2025-01-08 16:11:39",
// isEnablePrint: true
// },
// {
// materialNumber: "G01-43-552867",
// materialName: "7口USB3.0集线器",
// specifications: "ORICO-H7013-U3-AD-EU-BK-BP",
// old_Specifications: "",
// barCode: "6936761881968",
// serialNumber: "10FC-616M3Q",
// twoSerialNumber: "10FC-616M3R-two",
// numberCode: "241224000416",
// id: 202593400,
// number: 300,
// isUse: false,
// isUseStr: "否",
// box: "",
// creator: "admin",
// createTime: "2024-12-24 10:27:05",
// printNumber: 0,
// downLoadNumber: 1,
// printTime: "",
// downLoadTime: "2025-01-08 16:11:39",
// isEnablePrint: true
// }
// ],
// isSuccess: true,
// status: 200,
// message: "Success"
// };
return http.post<ResPage<any>>(`SerialNumber/GetList`, params);
};
//转换规格型号 SerialNumber/UpdateMaterial
export const getUpdateMaterialApi = (params: Record<string, any>) => {
return http.post<ResPage<any>>(`SerialNumber/UpdateMaterial`, params);
};
//产品条码列表下载
export const getSerialNumberDownLoadApi = (params: Record<string, any>) => {
return http.post<ResPage<any>>(`SerialNumber/Export`, params);
};
//生成条码
export const generateBarCodeApi = (params: Record<string, any>) => {
return http.post<ResPage<any>>(`SerialNumber/Generate`, params);
};
//打印
export const getPrintListCodeApi = (params: Record<string, any>) => {
return http.post<ResPage<any>>(`SerialNumber/Print`, params);
};

48
src/api/modules/boxCode.ts
View File

@@ -1,48 +0,0 @@
import http from "@/api";
import { ResPage } from "@/api/interface/index";
//箱信息列表
export const getListApi = (params: any) => {
return http.post<ResPage<any>>(`Box/GetList`, params);
};
//生成箱碼
export const getBoxGenerateApi = (params: any) => {
return http.post<ResPage<any>>(`Box/Generate`, params);
};
//裝箱保存
export const getSaveBoxApi = (params: any) => {
return http.post<ResPage<any>>(`Box/Save`, params, { noLoading: false });
};
//打印
export const getPrintBoxApi = (params: any) => {
return http.post<ResPage<any>>(`Box/Print`, params);
};
//刪除 /
export const getDeleteBoxApi = (params: any) => {
return http.post<ResPage<any>>(`Box/Delete`, params);
};
//清空
export const getClearBoxApi = (params: any) => {
return http.get<ResPage<any>>(`Box/Clear`, params);
};
//根据箱号获取箱信息
export const getBoxByNoApi = (params: any) => {
return http.get<ResPage<any>>(`Box/GetBoxByNo`, params, {
noLoading: true
});
};
//根据序列号获取序列号信息
export const getSerialNumberApi = (params: any) => {
return http.get<ResPage<any>>(`SerialNumber/Get`, params);
};
//根据箱号去获取序列号
export const getSerialNumberByBoxIdApi = (params: any) => {
return http.post<ResPage<any>>(`SerialNumber/GetByBoxId`, params, { noLoading: true });
};
//重新装箱
export const getBoxRestartApi = (params: any) => {
return http.post<ResPage<any>>(`Box/Restart`, params);
};
//开始装箱时间接口 Box/BeginCarton
export const getBeginCartonApi = (params: any) => {
return http.get<ResPage<any>>(`Box/BeginCarton`, params);
};

14
src/api/modules/boxMark.ts
View File

@@ -1,14 +0,0 @@
//箱唛
import http from "@/api";
import { ResPage } from "@/api/interface/index";
//箱唛列表
export const getBoxMarkListApi = (params: Record<string, any>) => {
return http.post<ResPage<any>>(`BoxMark/GetList`, params);
};
//生成箱唛
export const getMaterialListApi = (params: any) => {
console.log(params);
// return http.get<any>(`SysConfig/GetMaterialList?speci=${encodeURIComponent(speci)}`);
return [];
};

30
src/api/modules/shop.ts Normal file
View File

@@ -0,0 +1,30 @@
import http from "@/api";
//店鋪資料列表
export const getShopListApi = () => {
return http.get<any>(`store`);
};
//獲取接入系統列表數據
export const getShopAccessSystemApi = () => {
return http.get<any>(`store/access_system`);
};
//删除
export const getShopDelApi = (params: any) => {
return http.delete<any>(`store/${params}`);
};
//新增
export const getShopAddApi = (params: any) => {
return http.post<any>(`store`, params);
};
//更新
export const getShopUpApi = (id: any, params: any) => {
return http.post<any>(`store/${id}`, params);
};
//详情
export const getShopDetailsApi = (id: any) => {
return http.post<any>(`store/${id}`);
};
//导出
export const getShopListExportApi = (params: any) => {
return http.get<any>(`store/export`, params);
};

3
src/components.d.ts vendored
View File

@@ -16,7 +16,6 @@ declare module "vue" {
ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
ElButton: typeof import("element-plus/es")["ElButton"];
ElCheckbox: typeof import("element-plus/es")["ElCheckbox"];
ElContainer: typeof import("element-plus/es")["ElContainer"];
ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
ElDialog: typeof import("element-plus/es")["ElDialog"];
@@ -29,7 +28,6 @@ declare module "vue" {
ElHeader: typeof import("element-plus/es")["ElHeader"];
ElIcon: typeof import("element-plus/es")["ElIcon"];
ElInput: typeof import("element-plus/es")["ElInput"];
ElInputNumber: typeof import("element-plus/es")["ElInputNumber"];
ElMain: typeof import("element-plus/es")["ElMain"];
ElMenu: typeof import("element-plus/es")["ElMenu"];
ElMenuItem: typeof import("element-plus/es")["ElMenuItem"];
@@ -44,7 +42,6 @@ declare module "vue" {
ElTabPane: typeof import("element-plus/es")["ElTabPane"];
ElTabs: typeof import("element-plus/es")["ElTabs"];
ElTag: typeof import("element-plus/es")["ElTag"];
ElTooltip: typeof import("element-plus/es")["ElTooltip"];
Empty: typeof import("./components/ProTable/components/Empty.vue")["default"];
Form: typeof import("./components/Form/index.vue")["default"];
FormItem: typeof import("./components/Form/components/FormItem.vue")["default"];

8
src/components/DetailsSearch/index.vue
View File

@@ -69,10 +69,10 @@
:disabled="item.disabled"
>
<el-option
v-for="options in item.options"
:label="options.label"
:value="options.value"
:key="options.label"
v-for="option in item.options"
:label="option.label"
:value="option.value"
:key="option.label"
/>
</el-select>
</template>

3
src/styles/element.scss
View File

@@ -268,3 +268,6 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.el-message {
z-index: 555;
}

137
src/views/foundation/set/shop/constant/list/details.ts
View File

@@ -1,6 +1,6 @@
export const DETAILS_FORM_DATA: any[] = [
{
prop: "org_number",
prop: "platform_name",
placeholder: "请输入",
type: "input",
label: "平台:",
@@ -9,7 +9,7 @@ export const DETAILS_FORM_DATA: any[] = [
class: "form-item1"
},
{
prop: "org_number",
prop: "platform_store_name",
placeholder: "请输入",
type: "input",
label: "平台店铺名称:",
@@ -18,16 +18,17 @@ export const DETAILS_FORM_DATA: any[] = [
class: "form-item1"
},
{
prop: "org_number",
placeholder: "请输入",
prop: "access_system",
placeholder: "请选择",
type: "select",
label: "订单接入系统:",
disabled: false,
required: true,
options: [],
class: "form-item1"
},
{
prop: "org_number",
prop: "kingdee_store_name",
placeholder: "请输入",
type: "input",
label: "金蝶店铺名称:",
@@ -36,7 +37,7 @@ export const DETAILS_FORM_DATA: any[] = [
class: "form-item1"
},
{
prop: "org_number",
prop: "kingdee_store_number",
placeholder: "请输入",
type: "input",
label: "金蝶店铺编码:",
@@ -45,4 +46,128 @@ export const DETAILS_FORM_DATA: any[] = [
class: "form-item1"
}
];
export const DETAILS_FORM_DATA1: any[] = [
{
prop: "platform_name",
placeholder: "请输入",
type: "input",
label: "平台:",
disabled: false,
required: true,
class: "form-item1"
},
{
prop: "platform_store_name",
placeholder: "请输入",
type: "input",
label: "平台店铺名称:",
disabled: false,
required: true,
class: "form-item1"
},
{
prop: "access_system",
placeholder: "请输入",
type: "select",
label: "订单接入系统:",
disabled: false,
required: true,
options: [],
class: "form-item1"
},
{
prop: "kingdee_store_name",
placeholder: "请输入",
type: "input",
label: "金蝶店铺名称:",
disabled: false,
required: true,
class: "form-item1"
},
{
prop: "kingdee_store_number",
placeholder: "请输入",
type: "input",
label: "金蝶店铺编码:",
disabled: false,
required: true,
class: "form-item1"
},
{
prop: "jushuitan_store_name",
placeholder: "请输入",
type: "input",
label: "聚水潭店铺名称:",
disabled: false,
required: true,
class: "form-item1"
}
];
export const DETAILS_FORM_DATA2: any[] = [
{
prop: "platform_name",
placeholder: "请输入",
type: "input",
label: "平台:",
disabled: false,
required: true,
class: "form-item1"
},
{
prop: "platform_store_name",
placeholder: "请输入",
type: "input",
label: "平台店铺名称:",
disabled: false,
required: true,
class: "form-item1"
},
{
prop: "access_system",
placeholder: "请输入",
type: "select",
label: "订单接入系统:",
disabled: false,
required: true,
options: [],
class: "form-item1"
},
{
prop: "kingdee_store_name",
placeholder: "请输入",
type: "input",
label: "金蝶店铺名称:",
disabled: false,
required: true,
class: "form-item1"
},
{
prop: "kingdee_store_number",
placeholder: "请输入",
type: "input",
label: "金蝶店铺编码:",
disabled: false,
required: true,
class: "form-item1"
},
{
prop: "lingxing_store_name",
placeholder: "请输入",
type: "input",
label: "领星店铺名称:",
disabled: false,
required: true,
class: "form-item1"
},
{
prop: "lingxing_store_number",
placeholder: "请输入",
type: "input",
label: " 领星店铺SellerID:",
disabled: false,
required: true,
class: "form-item1"
}
];
export const DETAILS_RULE_FORM: any = {};

14
src/views/foundation/set/shop/constant/list/search.ts
View File

@@ -17,37 +17,37 @@ interface FormItem {
}
export const FORM_DATA: FormItem[] = [
{
prop: "org_number",
prop: "platform_name",
placeholder: "请输入平台",
type: "input",
label: "平台: "
},
{
prop: "org_number",
prop: "platform_store_name",
placeholder: "请输入平台店铺名称",
type: "input",
label: "平台店铺名称: "
},
{
prop: "org_number",
prop: "kingdee_store_name",
placeholder: "请输入金蝶店铺名称",
type: "input",
label: "金蝶店铺名称: "
},
{
prop: "org_number",
prop: "jushuitan_store_name",
placeholder: "请输入聚水潭店铺名称",
type: "input",
label: "聚水潭店铺名称: "
},
{
prop: "org_number",
prop: "lingxing_store_name",
placeholder: "请输入领星店铺名称",
type: "input",
label: "领星店铺名称: "
},
{
prop: "org_number",
prop: "operator_name",
placeholder: "请输入更新人",
type: "input",
label: "更新人: "
@@ -58,7 +58,7 @@ export const FORM_DATA: FormItem[] = [
options: [],
startPlaceholder: "更新开始日期",
endPlaceholder: "更新结束日期",
startDate: "updated_at",
startDate: "update_time",
// endDate: "createEndDate",
label: "更新时间: "
}

24
src/views/foundation/set/shop/constant/list/table.ts
View File

@@ -5,53 +5,59 @@ export const COLUMNS = [
align: "left",
fixed: true,
label: "平台店铺名称",
prop: "material_number",
prop: "platform_store_name",
width: 200
},
{
align: "left",
label: "平台",
prop: "sku",
prop: "platform_name",
fixed: true,
width: 200
},
{
align: "left",
label: "订单接入系统",
prop: "material_name",
prop: "access_system",
width: 200
},
{
align: "left",
label: "聚水潭店铺名称",
prop: "jushuitan_store_name",
width: 200
},
{
align: "left",
label: "领星店铺名称",
prop: "org_name",
prop: "lingxing_store_name",
width: 200
},
{
align: "left",
label: "领星店铺SellerID",
prop: "product_line"
prop: "lingxing_store_number"
},
{
align: "left",
label: "金蝶店铺名称",
prop: "bar_code"
prop: "kingdee_store_name"
},
{
align: "left",
label: "金蝶店铺编码",
prop: "fnsku"
prop: "kingdee_store_number"
},
{
align: "left",
label: "更新人",
prop: "category_lv1"
prop: "operator"
},
{
align: "left",
label: "更新时间",
prop: "category_lv2"
prop: "updated_at"
}
];

163
src/views/foundation/set/shop/index.vue
View File

@@ -7,7 +7,7 @@
@handleButtonClickCallback="handleButtonClickCallback"
></PermissionButton>
</div>
<el-dialog v-model="dataStore.dialogVisible" width="660" :before-close="handleClose" title="新增店铺">
<el-dialog v-model="dataStore.dialogVisible" width="660" :before-close="handleClose" :title="dataStore.title">
<DetailsSearch
:formData="dataStore.detailsFormData"
:ruleForm="dataStore.detailsRuleForm"
@@ -26,7 +26,7 @@
<ProTable
ref="proTableRef"
:columns="dataStore.columns"
:request-api="getMaterialListApi"
:request-api="getShopListApi"
:init-param="dataStore.initParam"
@selectionChange="selectionChange"
>
@@ -38,6 +38,11 @@
:formData="dataStore.formData"
/>
</template>
<template #platform_store_name="scope">
<a @click="handleOpen(scope.row)" class="break-word to-details">
{{ scope.row.platform_store_name }}
</a>
</template>
</ProTable>
</div>
</template>
@@ -46,10 +51,18 @@
import ProTable from "@/components/ProTable/index.vue";
import SearchForm from "@/components/SearchForm/index.vue";
import PermissionButton from "@/components/PermissionButton/index.vue";
import { getMaterialListApi } from "@/api/modules/foundationMaterial";
import {
getShopListApi,
getShopDelApi,
getShopAccessSystemApi,
getShopAddApi,
getShopUpApi,
getShopDetailsApi,
getShopListExportApi
} from "@/api/modules/shop";
import { useMsg } from "@/hooks/useMsg";
import { RULE_FORM, FORM_DATA, COLUMNS, BUTTON } from "./constant/list/index";
import { DETAILS_RULE_FORM, DETAILS_FORM_DATA } from "./constant/list/details";
import { DETAILS_RULE_FORM, DETAILS_FORM_DATA, DETAILS_FORM_DATA1, DETAILS_FORM_DATA2 } from "./constant/list/details";
//表格TS
import { ProTableInstance } from "@/components/ProTable/interface";
@@ -64,21 +77,21 @@ const dataStore = reactive<any>({
initParam: cloneDeep(RULE_FORM), // 初始化搜索条件|重置搜索条件
formData: FORM_DATA, //搜索配置项
buttons: cloneDeep(BUTTON),
options: [], //规格型号
labelWidth: "120px",
title: "新增店铺",
detailsFormData: cloneDeep(DETAILS_FORM_DATA),
detailsRuleForm: cloneDeep(DETAILS_RULE_FORM),
dialogVisible: false, //弹窗
accessSystemOptions: [], //
selectionList: [] //选中表格的行
});
console.log(dataStore.detailsFormData, "=detailsFormData=");
// 表格选择事件
const selectionChange = (selection: any) => {
dataStore.selectionList = selection;
};
//删除
const handleDel = () => {
console.log();
if (!dataStore.selectionList.length) {
useMsg("warning", "请选择数据 ！");
return;
@@ -93,22 +106,73 @@ const handleDel = () => {
dataStore.selectionList?.forEach((item: any) => {
ids.push(item.id);
});
console.log(ids, "==========");
// const result = await getSubscribeDelApi(ids.join(","));
// if (result?.code === 0) {
// proTable?.value!.getTableList();
// useMsg("success", "删除成功 ！");
// }
const result = await getShopDelApi(ids.join(","));
if (result?.code === 0) {
proTable?.value!.getTableList();
useMsg("success", "删除成功 ！");
}
})
.catch(() => {});
}
};
//新增
const getShopAdd = async () => {
const result = await getShopAddApi(dataStore.detailsRuleForm);
if (result?.code === 0) {
useMsg("success", "新增成功 ！");
setTimeout(() => {
dataStore.dialogVisible = false;
}, 600);
}
};
//更新
const getShopUp = async () => {
const result = await getShopUpApi(dataStore.rowId, dataStore.detailsRuleForm);
if (result?.code === 0) {
useMsg("success", "更新成功 ！");
setTimeout(() => {
dataStore.dialogVisible = false;
}, 600);
}
};
//详情
const getShopDetails = async (id: any) => {
const result = await getShopDetailsApi(id);
if (result?.code === 0) {
dataStore.dialogVisible = true;
dataStore.title = "编辑店铺";
setAccessSystem(result?.data?.access_system);
dataStore.detailsRuleForm = result?.data;
}
};
//表格row点击事件
const handleOpen = (row: any) => {
dataStore.rowId = row.id;
getShopDetails(row.id);
};
//獲取接入系統列表數據
const getShopAccessSystem = async () => {
const result = await getShopAccessSystemApi();
if (result?.code === 0) {
let data = cloneDeep(result?.data);
let options = [];
data?.length &&
data.forEach((item: any) => {
options.push({ value: item.id, label: item.name, is_default: item.is_default });
});
dataStore.accessSystemOptions = options;
dataStore.detailsFormData[2].options = options;
}
};
getShopAccessSystem();
//导出
const handleExport = async () => {
// const result = await getSubscribeResetListExportApi(dataStore.initParam);
// if (result?.code === 0) {
// useMsg("success", "导出成功请前往导出列表中进行下载 ！");
// }
const result = await getShopListExportApi(dataStore.initParam);
if (result?.code === 0) {
useMsg("success", "导出成功请前往导出列表中进行下载 ！");
}
};
//顶部按钮点击事件
const handleButtonClickCallback = (item: any) => {
@@ -120,6 +184,7 @@ const handleButtonClickCallback = (item: any) => {
return handleExport();
}
if (type === "add") {
dataStore.title = "新增店铺";
dataStore.dialogVisible = true;
}
};
@@ -129,9 +194,52 @@ const handleClose = () => {
detailsRef?.value?.formElement?.resetFields();
dataStore.dialogVisible = false;
};
//提交前的验证条件
const handleAddYz = () => {
if (!dataStore.detailsRuleForm.platform_name) {
useMsg("warning", "平台不能为空 !");
return false;
}
if (!dataStore.detailsRuleForm.platform_store_name) {
useMsg("warning", "平台店铺名称不能为空 !");
return false;
}
if (!dataStore.detailsRuleForm.access_system) {
useMsg("warning", "订单接入系统不能为空 !");
return false;
}
if (!dataStore.detailsRuleForm.kingdee_store_name) {
useMsg("warning", "金蝶店铺名称不能为空 !");
return false;
}
if (!dataStore.detailsRuleForm.kingdee_store_number) {
useMsg("warning", "金蝶店铺编码不能为空 !");
return false;
}
if (dataStore.detailsRuleForm.access_system === 2 && !dataStore.detailsRuleForm.jushuitan_store_name) {
useMsg("warning", "聚水潭店铺名称不能为空 !");
return false;
}
if (dataStore.detailsRuleForm.access_system === 3 && !dataStore.detailsRuleForm.lingxing_store_name) {
useMsg("warning", "领星店铺名称不能为空 !");
return false;
}
if (dataStore.detailsRuleForm.access_system === 3 && !dataStore.detailsRuleForm.lingxing_store_number) {
useMsg("warning", "领星店铺SellerID不能为空 !");
return false;
}
};
//弹窗确认
const handleCommit = () => {
dataStore.dialogVisible = false;
const is = handleAddYz();
if (!is) {
return;
}
if (dataStore.title === "新增店铺") {
getShopAdd();
} else {
getShopUp();
}
};
//搜索
const handleSearch = async (params: any) => {
@@ -149,6 +257,25 @@ const handleReset = () => {
proTableRef?.value!.getTableList();
});
};
const setAccessSystem = (val: any) => {
if (val === 2) {
dataStore.detailsFormData = cloneDeep(DETAILS_FORM_DATA1);
dataStore.detailsFormData[2].options = cloneDeep(dataStore.accessSystemOptions);
dataStore.detailsRuleForm.lingxing_store_name = "";
dataStore.lingxing_store_number = "";
}
if (val === 3) {
dataStore.detailsFormData = cloneDeep(DETAILS_FORM_DATA2);
dataStore.detailsFormData[2].options = cloneDeep(dataStore.accessSystemOptions);
dataStore.detailsRuleForm.jushuitan_store_name = "";
}
};
watch(
() => dataStore.detailsRuleForm.access_system,
(newVal: any) => {
setAccessSystem(newVal);
}
);
</script>
<style scope lang="scss">