字典方法添加 打款模块

src/main.js

@@ -44,7 +44,7 @@ import {
   selectDictLabels
 } from '@/utils/ruoyi'
 
-import { dictDataEcho, moneyFormat, calculationWeek } from '@/utils/util'
+import { dictDataEcho, moneyFormat, calculationWeek,getDict } from '@/utils/util'
 
 // 分页组件
 import Pagination from '@/components/Pagination'
@@ -78,6 +78,8 @@ app.config.globalProperties.selectDictLabels = selectDictLabels
 app.config.globalProperties.dictDataEcho = dictDataEcho
 app.config.globalProperties.moneyFormat = moneyFormat
 app.config.globalProperties.calculationWeek = calculationWeek
+app.config.globalProperties.getDict = getDict
+
 
 
 

src/utils/util.js

@@ -1,5 +1,11 @@
 import moment from "moment";
 
+import {
+  post,
+  get
+} from '@/utils/request'
+import Cookies from 'js-cookie'
+
 //根据value值回显字典label值
 export function dictDataEcho(value, arr) {
   if (value && arr) {
@@ -13,6 +19,46 @@ export function dictDataEcho(value, arr) {
   return "";
 }
 
+export function getDict(key) {
+  return new Promise((resolve, reject) => {
+    let dictObj = {}
+    let arr = {}
+    let num = 0
+    if(!sessionStorage.getItem('dict')) {
+      sessionStorage.setItem('dict', JSON.stringify(dictObj))
+    }else{
+      dictObj = JSON.parse(sessionStorage.getItem('dict'))
+    }
+    for (let i = 0; i < key.length; i++) {
+      const element = key[i];
+      if(dictObj[element]) {
+        arr[element] = dictObj[element]
+        num++
+        if(num === key.length) {
+          resolve(arr);
+        }
+      }else{
+        post("/dictTenantData/page", {
+          pageNum: 1,
+          pageSize: 999,
+          tenantId: Cookies.get('tenantId'),
+          dictCode: element,
+        }).then(res => {
+          dictObj[element] = res.rows
+          arr[element] = res.rows
+          sessionStorage.setItem('dict', JSON.stringify(dictObj))
+          num++
+          console.log(num)
+          if(num === key.length) {
+            resolve(arr);
+          }
+        })
+      }
+    }
+  })
+  
+}
+
 // 金额千分符
 export function moneyFormat(s, n) {
   if (s) {

src/views/finance/fundManage/accountPayment/index.vue

@@ -0,0 +1,509 @@
+<template>
+	<div class="user">
+		<div class="content">
+			<byTable
+				:source="sourceList.data"
+				:pagination="sourceList.pagination"
+				:config="config"
+				:loading="loading"
+				highlight-current-row
+				:selectConfig="selectConfig"
+				:table-events="{
+					//element talbe事件都能传
+					select: select,
+				}"
+				:action-list="[
+					{
+						text: 'Excel导入',
+						action: () => openExcel(),
+						disabled: false,
+					},
+					{
+						text: '添加物料',
+						action: () => openModal('add'),
+						disabled: false,
+					},
+				]"
+				@get-list="getList"
+			>
+				<template #pic="{ item }">
+					<div v-if="item.fileList.length > 0">
+						<img
+							:src="item.fileList[0].fileUrl"
+							class="pic"
+							@click="handleClickFile(item.fileList[0])"
+						/>
+					</div>
+					<div v-else></div>
+				</template>
+			</byTable>
+		</div>
+		<el-dialog
+			:title="modalType == 'add' ? '添加' : '编辑'"
+			v-model="dialogVisible"
+			width="500"
+			v-loading="loading"
+		>
+			<byForm
+				:formConfig="formConfig"
+				:formOption="formOption"
+				v-model="formData.data"
+				:rules="rules"
+				ref="byform"
+			>
+				<template #productPic>
+					<div>
+						<el-upload
+							v-model:fileList="fileList"
+							action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
+							:data="uploadData"
+							list-type="picture-card"
+							:on-remove="handleRemove"
+							:on-success="handleSuccess"
+							:before-upload="handleBeforeUpload"
+						>
+							<el-icon><Plus /></el-icon>
+						</el-upload>
+					</div>
+				</template>
+			</byForm>
+			<template #footer>
+				<el-button @click="dialogVisible = false" size="large"
+					>取 消</el-button
+				>
+				<el-button
+					type="primary"
+					@click="submitForm('byform')"
+					size="large"
+					:loading="submitLoading"
+				>
+					确 定
+				</el-button>
+			</template>
+		</el-dialog>
+		<el-dialog
+			title="Excel导入"
+			v-model="openExcelDialog"
+			width="400"
+			v-loading="loading"
+		>
+			<template #footer>
+				<el-button @click="openExcelDialog = false" size="large"
+					>取 消</el-button
+				>
+				<el-button
+					type="primary"
+					@click="submitExcel()"
+					size="large"
+					:loading="submitLoading"
+				>
+					确 定
+				</el-button>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+  
+<script setup>
+/* eslint-disable vue/no-unused-components */
+import { ElMessage, ElMessageBox } from 'element-plus'
+import byTable from '@/components/byTable/index'
+import byForm from '@/components/byForm/index'
+
+import { computed, defineComponent, ref } from 'vue'
+const loading = ref(false)
+const submitLoading = ref(false)
+const sourceList = ref({
+	data: [],
+	pagination: {
+		total: 3,
+		pageNum: 1,
+		pageSize: 10,
+		type: '',
+		productClassifyId: '',
+		keyword: '',
+		definition: '2',
+	},
+})
+let dialogVisible = ref(false)
+let openExcelDialog = ref(false)
+
+let modalType = ref('add')
+let rules = ref({
+	productClassifyId: [
+		{ required: true, message: '请选择物料分类', trigger: 'change' },
+	],
+	type: [{ required: true, message: '请选择物料类型', trigger: 'change' }],
+	name: [{ required: true, message: '请输入物料名称', trigger: 'blur' }],
+	unit: [{ required: true, message: '请选择单位', trigger: 'change' }],
+})
+const { proxy } = getCurrentInstance()
+const selectConfig = computed(() => {
+	return [
+		{
+			label: '打款状态',
+			prop: 'paymentStatus',
+			data: [],
+		},
+	]
+})
+const config = computed(() => {
+	return [
+		{
+			attrs: {
+				label: '归属公司',
+				prop: 'corporationName',
+			},
+		},
+		{
+			attrs: {
+				label: '归属部门',
+				prop: 'deptName',
+			},
+		},
+		{
+			attrs: {
+				label: '付款类型',
+				prop: 'type',
+                render(type) {
+                    return proxy.dictDataEcho(type, fundsType.value);
+                },
+			},
+		},
+		{
+			attrs: {
+				label: '申请人',
+				prop: 'userName',
+			},
+		},
+		{
+			attrs: {
+				label: '申请时间',
+				prop: 'createTime',
+			},
+		},
+		{
+			attrs: {
+				label: '用款时间',
+				prop: 'paymentTime',
+			},
+		},
+		{
+			attrs: {
+				label: '金额',
+				prop: 'total',
+			},
+		},
+		{
+			attrs: {
+				label: '款项说明',
+				prop: 'paymentRemarks',
+			},
+		},
+		{
+			attrs: {
+				label: '打款状态',
+				prop: 'status',
+			},
+		},
+		{
+			attrs: {
+				label: '操作',
+				width: '200',
+				align: 'right',
+			},
+			// 渲染 el-button，一般用在最后一列。
+			renderHTML(row) {
+				return [
+					{
+						attrs: {
+							label: '修改',
+							type: 'primary',
+							text: true,
+						},
+						el: 'button',
+						click() {
+							getDtl(row)
+						},
+					},
+					{
+						attrs: {
+							label: '删除',
+							type: 'danger',
+							text: true,
+						},
+						el: 'button',
+						click() {
+							// 弹窗提示是否删除
+							ElMessageBox.confirm(
+								'此操作将永久删除该数据, 是否继续?',
+								'提示',
+								{
+									confirmButtonText: '确定',
+									cancelButtonText: '取消',
+									type: 'warning',
+								}
+							).then(() => {
+								// 删除
+								proxy
+									.post('/productInfo/delete', {
+										id: row.id,
+									})
+									.then((res) => {
+										ElMessage({
+											message: '删除成功',
+											type: 'success',
+										})
+										getList()
+									})
+							})
+						},
+					},
+				]
+			},
+		},
+	]
+})
+
+let formData = reactive({
+	data: {},
+})
+const formOption = reactive({
+	inline: true,
+	labelWidth: 100,
+	itemWidth: 100,
+	rules: [],
+})
+const byform = ref(null)
+const treeListData = ref([])
+const formConfig = computed(() => {
+	return [
+		{
+			type: 'treeSelect',
+			prop: 'productClassifyId',
+			label: '物料分类',
+			data: [],
+		},
+		{
+			type: 'select',
+			prop: 'type',
+			label: '物料类型',
+			required: true,
+			data: [
+				{
+					label: '原料',
+					id: '1',
+				},
+				{
+					label: '辅料',
+					id: '2',
+				},
+				{
+					label: '配件',
+					id: '3',
+				},
+				{
+					label: '包材',
+					id: '4',
+				},
+				{
+					label: '其他',
+					id: '5',
+				},
+			],
+		},
+		{
+			type: 'input',
+			prop: 'name',
+			label: '物料名称',
+		},
+		{
+			type: 'input',
+			prop: 'spec',
+			label: '规格型号',
+		},
+		{
+			type: 'select',
+			prop: 'unit',
+			label: '单位',
+			required: true,
+			data: [
+				{
+					label: '个',
+					id: '个',
+				},
+				{
+					label: '双',
+					id: '双',
+				},
+			],
+		},
+		{
+			type: 'slot',
+			slotName: 'productPic',
+			prop: 'fileList',
+			label: '产品图片',
+		},
+
+		{
+			type: 'input',
+			prop: 'remark',
+			label: '备注',
+			itemType: 'textarea',
+		},
+	]
+})
+const newPassword = () => {
+	formData.data.password = generatePassword()
+}
+const generatePassword = () => {
+	var length = 12,
+		charset =
+			'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',
+		password = ''
+	for (var i = 0, n = charset.length; i < length; ++i) {
+		password += charset.charAt(Math.floor(Math.random() * n))
+	}
+	return password
+}
+
+const getList = async (req) => {
+	sourceList.value.pagination = { ...sourceList.value.pagination, ...req }
+	loading.value = true
+	proxy
+		.post('/accountPayment/page', sourceList.value.pagination)
+		.then((message) => {
+			console.log(message)
+			sourceList.value.data = message.rows
+			sourceList.value.pagination.total = message.total
+			setTimeout(() => {
+				loading.value = false
+			}, 200)
+		})
+}
+const uploadData = ref({})
+const fileList = ref([])
+const fileListCopy = ref([])
+proxy.getDict(['payment_status','funds_type','funds_payment_method']).then((res) => {
+	console.log(res)
+})
+const openModal = () => {
+	dialogVisible.value = true
+	modalType.value = 'add'
+	formData.data = {
+		definition: '2',
+		fileList: [],
+		type: '1',
+	}
+	fileList.value = []
+	fileListCopy.value = []
+}
+
+const openExcel = () => {
+	openExcelDialog.value = true
+}
+const submitExcel = () => {
+	openExcelDialog.value = false
+}
+const selection = ref({
+	data: [],
+})
+const select = (_selection, row) => {
+	selection.value.data = _selection
+	console.log(_selection.length)
+}
+
+const submitForm = () => {
+	console.log(byform.value)
+	byform.value.handleSubmit((valid) => {
+		formData.data.fileList = fileListCopy.value.map((x) => ({
+			id: x.id,
+			fileName: x.fileName,
+		}))
+		submitLoading.value = true
+		proxy.post('/productInfo/' + modalType.value, formData.data).then(
+			(res) => {
+				ElMessage({
+					message: modalType.value == 'add' ? '添加成功' : '编辑成功',
+					type: 'success',
+				})
+				dialogVisible.value = false
+				submitLoading.value = false
+				getList()
+			},
+			(err) => {
+				submitLoading.value = false
+			}
+		)
+	})
+}
+
+const getTreeList = () => {
+	proxy
+		.post('/productClassify/tree', {
+			parentId: '',
+			name: '',
+			definition: '2',
+		})
+		.then((message) => {
+			treeListData.value = message
+			formConfig.value[0].data = message
+		})
+}
+
+const getDtl = (row) => {
+	modalType.value = 'edit'
+	proxy.post('/productInfo/detail', { id: row.id }).then((res) => {
+		fileList.value = row.fileList.map((x) => ({ ...x, url: x.fileUrl }))
+		fileListCopy.value = [...fileList.value]
+		res.type = res.type + ''
+		res.definition = '2'
+		formData.data = res
+		dialogVisible.value = true
+	})
+}
+getTreeList()
+getList()
+const handleBeforeUpload = async (file) => {
+	const res = await proxy.post('/fileInfo/getSing', { fileName: file.name })
+	uploadData.value = res.uploadBody
+	fileListCopy.value.push({
+		id: res.id,
+		fileName: res.fileName,
+		path: res.fileUrl,
+		url: res.fileUrl,
+		uid: file.uid,
+	})
+}
+
+const handleSuccess = (res, file, files) => {
+	// 查当前file的index值去赋值对应的copy变量的值
+	// let uid = file.uid;
+	// const index = fileList.value.findIndex((x) => x.uid === uid);
+	// fileListCopy.value[index].uid = uid;
+}
+
+const handleRemove = (file) => {
+	const index = fileListCopy.value.findIndex(
+		(x) => x.uid === file.uid || x.id === file.id
+	)
+	fileListCopy.value.splice(index, 1)
+}
+
+const handleClickFile = (file) => {
+	window.open(file.fileUrl, '_blank')
+}
+</script>
+  
+<style lang="scss" scoped>
+.user {
+	padding: 20px;
+}
+.pic {
+	object-fit: contain;
+	width: 50px;
+	height: 50px;
+	cursor: pointer;
+	vertical-align: middle;
+}
+</style>

src/views/process/flowExample/index.vue

@@ -0,0 +1,355 @@
+<template>
+	<div class="tenant">
+		<!-- <Banner /> -->
+		<div class="content">
+			<byTable
+				:source="sourceList.data"
+				:pagination="sourceList.pagination"
+				:config="config"
+				:loading="loading"
+				highlight-current-row
+				:selectConfig="selectConfig"
+				:table-events="{
+					//element talbe事件都能传
+					select: select,
+				}"
+				@get-list="getList"
+			>
+				<template #slotName="{ item }">
+					{{ item.createTime }}
+				</template>
+			</byTable>
+		</div>
+		<el-dialog
+			:title="modalType == 'add' ? '新增' : '编辑'"
+			v-model="dialogVisible"
+			width="400"
+			v-loading="loading"
+		>
+			<byForm
+				:formConfig="formConfig"
+				:formOption="formOption"
+				v-model="formData.data"
+				:rules="rules"
+				ref="byform"
+			>
+			</byForm>
+			<template #footer>
+				<el-button @click="dialogVisible = false" size="large"
+					>取 消</el-button
+				>
+				<el-button
+					type="primary"
+					@click="submitForm('byform')"
+					size="large"
+					:loading="submitLoading"
+				>
+					确 定
+				</el-button>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+    
+  <script setup>
+/* eslint-disable vue/no-unused-components */
+import { ElMessage, ElMessageBox } from 'element-plus'
+import byTable from '@/components/byTable/index'
+import byForm from '@/components/byForm/index'
+import { computed, defineComponent, ref } from 'vue'
+const loading = ref(false)
+const submitLoading = ref(false)
+const dictCommonModal = ref(false)
+const sourceList = ref({
+	data: [],
+	pagination: {
+		total: 3,
+		pageNum: 1,
+		pageSize: 10,
+	},
+})
+let dialogVisible = ref(false)
+let roomDialogVisible = ref(false)
+let modalType = ref('add')
+let rules = ref({
+	classifyName: [
+		{ required: true, message: '请输入功能模块', trigger: 'blur' },
+	],
+	flowKey: [{ required: true, message: '请输入流程标识', trigger: 'blur' }],
+	flowName: [{ required: true, message: '请输入流程名称', trigger: 'blur' }],
+})
+const { proxy } = getCurrentInstance()
+const selectConfig = computed(() => {
+	return [
+        {
+			label: '流程类型',
+			prop: 'flowInfoId',
+			data: [],
+		},
+		{
+			label: '流程状态',
+			prop: 'status',
+
+			data: [
+				{
+					label: '进行中',
+					value: '1',
+				},
+				{
+					label: '已结束',
+					value: '2',
+				},
+			],
+		},
+	]
+})
+const config = computed(() => {
+	return [
+		{
+			attrs: {
+				label: '流程类型',
+				prop: 'title',
+			},
+		},
+		{
+			attrs: {
+				label: '流程标题',
+				prop: 'title',
+			},
+		},
+
+		{
+			attrs: {
+				label: '流程状态',
+				width: 100,
+				prop: 'status',
+			},
+			render(status) {
+				//1审核中 2审核通过 3审核不通过
+				return status == 0 || status == 1 ? '待处理' : '已结束'
+			},
+		},
+		{
+			attrs: {
+				label: '发起人',
+				prop: 'createUserName',
+			},
+		},
+		{
+			attrs: {
+				label: '发起时间',
+				prop: 'createTime',
+			},
+		},
+		{
+			attrs: {
+				label: '操作',
+				width: '200',
+				align: 'right',
+			},
+			// 渲染 el-button，一般用在最后一列。
+			renderHTML(row) {
+				return [
+					row.status != 1
+						? {
+								attrs: {
+									label: '重新审批',
+									type: 'primary',
+									text: true,
+									bg: true,
+									disabled: false,
+								},
+								el: 'button',
+								click() {
+									flowJump(row)
+								},
+						  }: {},
+                    row.status == 1?   
+						{
+								attrs: {
+									label: '退回上一步',
+									text: true,
+									bg: true,
+									type: 'primary',
+									disabled: false,
+									style: {
+										color: '#e6a23c',
+									},
+								},
+								el: 'button',
+								click() {
+									flowJump(row,3)
+								},
+						  }:{},
+                    row.status == 1?      
+                          {
+								attrs: {
+									label: '向下流转',
+									text: true,
+									bg: true,
+									type: 'primary',
+									disabled: false,
+									style: {
+										color: '#e6a23c',
+									},
+								},
+								el: 'button',
+								click() {
+									flowJump(row,1)
+								},
+						  }:{},
+				]
+			},
+		},
+	]
+})
+let dtlData = reactive({
+	data: {},
+})
+let formData = reactive({
+	data: {},
+	treeData: [],
+})
+const formOption = reactive({
+	inline: true,
+	labelWidth: 100,
+	itemWidth: 100,
+	rules: [],
+})
+const byform = ref(null)
+const treeData = ref([])
+const formConfig = computed(() => {
+	return [
+		{
+			type: 'input',
+			prop: 'classifyName',
+			label: '功能模块',
+		},
+		{
+			type: 'input',
+			prop: 'flowKey',
+			label: '流程标识',
+			isHide: modalType.value == 'edit',
+		},
+		{
+			type: 'input',
+			prop: 'flowName',
+			label: '流程名称',
+		},
+	]
+})
+
+const flowJump = (row,type) => {
+    proxy.post('/flowProcess/jump', {flowId:row.id,handleType:type,version:row.version,data:{}}).then((message) => {
+        console.log(message)
+        if(message){
+            ElMessage.success('操作成功')
+            getList()
+        }
+    })
+}
+
+const getFlowType = () => {
+    proxy
+        .post('/flowExample/getFlowType')
+            .then((message) => {
+                console.log(message)
+                selectConfig.value[0].data = message.map((item) => {
+                    return {
+                        label: item.flowName,
+                        value: item.id,
+                    }
+                })
+            })
+        
+}
+getFlowType()
+
+const getList = async (req) => {
+	sourceList.value.pagination = { ...sourceList.value.pagination, ...req }
+	loading.value = true
+	proxy
+		.post('/flowExample/page', sourceList.value.pagination)
+		.then((message) => {
+			console.log(message)
+			sourceList.value.data = message.rows
+			sourceList.value.pagination.total = message.total
+			setTimeout(() => {
+				loading.value = false
+			}, 200)
+		})
+}
+
+const openModal = () => {
+	dialogVisible.value = true
+	modalType.value = 'add'
+	formData.data = {}
+}
+const selection = ref({
+	data: [],
+})
+const select = (_selection, row) => {
+	selection.value.data = _selection
+	console.log(_selection.length)
+}
+
+const tree = ref(null)
+const submitTree = () => {
+	proxy
+		.post('/tenantInfo/bindingMenu', {
+			tenantId: selection.value.data[0].tenantId,
+			menuIdList: tree.value.getCheckedKeys(),
+		})
+		.then((res) => {
+			ElMessage({
+				message: '保存成功',
+				type: 'success',
+			})
+			roomDialogVisible.value = false
+		})
+}
+
+const submitForm = () => {
+	byform.value.handleSubmit((valid) => {
+		submitLoading.value = true
+		proxy
+			.post('/flowInfo/' + modalType.value, formData.data)
+			.then((res) => {
+				ElMessage({
+					message: modalType.value == 'add' ? '添加成功' : '编辑成功',
+					type: 'success',
+				})
+				dialogVisible.value = false
+				submitLoading.value = false
+				getList()
+			})
+	})
+}
+
+const getDtl = (row) => {
+	formData.data = { ...row }
+	modalType.value = 'edit'
+	dialogVisible.value = true
+}
+
+const changeStatus = (row) => {
+	modalType.value = 'edit'
+	proxy
+		.post('/flowInfo/edit', { ...row, status: row.status === 0 ? 1 : 0 })
+		.then((res) => {
+			ElMessage({
+				message: '操作成功',
+				type: 'success',
+			})
+			getList()
+		})
+}
+
+getList()
+</script>
+    
+  <style lang="scss" scoped>
+.tenant {
+	padding: 20px;
+}
+</style>

src/views/process/processConfig/vueFlow.vue

@@ -316,6 +316,13 @@ const addVersion = () => {
 	const idObg = {}
 	for (let i = 0; i < submitFormData.flowDefinitionNodeList.length; i++) {
 		const element = submitFormData.flowDefinitionNodeList[i];
+		if(element.parentId == null && element.nodeName == '结束') {
+			ElMessage({
+				message: '有结束节点未连线，请配置',
+				type: 'warning',
+			})
+			return
+		}
 		if(isNaN(element.id)) {
 			if(idObg[element.id]) {
 				element.id = idObg[element.id]
@@ -372,7 +379,7 @@ const deleteFlowDefinitionNodeObj = (id) => {
 const gethandleObjectList = (e) => {
 	formData.data.handleObjectId = ''
 	if(e === 1) {
-		proxy.get('/tenantUser/list?pageNum=1&pageSize=1000&tenantId=' + Cookies.get('tenantId'),{})
+		proxy.get('/tenantUser/list?pageNum=1&pageSize=1000&tenantId=' + submitFormData.tenantId,{})
 			.then((res) => {
 				formConfig.value[2].data = res.rows.map((item) => {
 					return {
@@ -383,7 +390,7 @@ const gethandleObjectList = (e) => {
 			})
 	}
 	if(e === 3 || e === 2) {
-		proxy.get('/tenantDept/list?pageNum=1&pageSize=1000&tenantId=' + Cookies.get('tenantId'),{})
+		proxy.get('/tenantDept/list?pageNum=1&pageSize=1000&tenantId=' + submitFormData.tenantId,{})
 			.then((res) => {
 				formConfig.value[2].data =res.data.map(item=> {
 					return {
@@ -397,7 +404,7 @@ const gethandleObjectList = (e) => {
 		
 	}
 	if(e === 5) {
-		proxy.get('/tenantRole/list?pageNum=1&pageSize=1000&tenantId=' + Cookies.get('tenantId'),{})
+		proxy.get('/tenantRole/list?pageNum=1&pageSize=1000&tenantId=' + submitFormData.tenantId,{})
 			.then((res) => {
 				formConfig.value[2].data = res.rows.map((item) => {
 					return {
@@ -436,6 +443,7 @@ const pushRoom = (port: any) => {
 			nodeType:99,
 			id:port.id,
 			nodeButtonSet:'',
+			parentId:null,
 		}
 	}
 	console.log(flowDefinitionNodeObj.value)
@@ -850,6 +858,7 @@ onMounted(() => {
 	//获取url router参数
 	const router = useRouter();
 	submitFormData.flowInfoId = router.currentRoute.value.query.id
+	submitFormData.tenantId = router.currentRoute.value.query.tenantId
 })
 </script>
 <style lang="scss">