795f3fa0 by 蔡俊立
2 parents fe351d83 b7c60ff6
<template>
<dialogBox title="家庭房产查询" @closeDialog="closeDialog" width="70%" height="700" :isButton="false" v-model="myValue">
<dialogBox title="家庭房产查询" @closeDialog="closeDialog" width="70%" :isButton="false" v-model="myValue">
<div class="jtfccx-edit">
<div class="jtfccx-edit-con">
<b class="title">申请信息</b>
<el-form :model="ruleForm" label-width="120px">
<el-form :model="form" label-width="120px">
<el-row>
<el-col :span="8">
<el-form-item label="查询用途" label-width="90px">
<el-input v-model="ruleForm.cxyt" class="width200px"></el-input>
<el-input v-model="form.djSqcxDO.cxyt" class="width200px"></el-input>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="与产权人的关系">
<el-radio-group v-model="ruleForm.ycyrgx">
<el-radio :label="1">房屋权利人</el-radio>
<el-radio :label="2">产权利害关系人</el-radio>
<el-radio :label="3">委托人</el-radio>
<el-radio-group v-model="form.djSqcxDO.ycyrgx">
<el-radio label="1">房屋权利人</el-radio>
<el-radio label="2">产权利害关系人</el-radio>
<el-radio label="3">委托人</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<personInfoTable @getInfoList="handleGetSqList" :dataList="sqdataList" />
<personInfoTable @getInfoList="handleGetSqList" :dataList="form.sqrList" />
<b class="title">权利人</b>
<personInfoTable @getInfoList="handleGetQlList" :dataList="qldataList" />
<div class="submit-button">
<el-button @click="resetClick">重置</el-button>
<el-button type="primary" @click="queryChick">查询</el-button>
</div>
<b class="title" v-show="isSearch">查询结果</b>
<lb-table :column="searchData.columns" v-if="isSearch" :data="searchData.data" :maxHeight="200" heightNumSetting
:pagination="false">
<personInfoTable @getInfoList="handleGetQlList" :dataList="form.qlrList" />
<div v-show="isSearch">
<b class="title">查询结果</b>
<lb-table :column="cxjgColumns" :data="form.cxjgList" :maxHeight="200" heightNumSetting :pagination="false">
</lb-table>
</div>
<div class="submit-button" v-show="isSearch" style="padding-bottom:20px">
<el-button type="primary" v-if="searchData.data.length > 0">房产结果打印(1)</el-button>
<el-button type="primary" v-else>无房证明打印(1)</el-button>
</div>
<el-divider></el-divider>
<div class="submit-button" style="padding-bottom:50px">
<el-button @click="resetClick">重置</el-button>
<el-button type="primary" v-show="isSearch==false" @click="queryChick">查询</el-button>
<el-button type="primary" v-show="isSearch&&form.dyjlList.length > 0">房产结果打印(1)</el-button>
<el-button type="primary" v-show="isSearch&&form.dyjlList.length == 0">无房证明打印(1)</el-button>
<el-button @click="closeDialog">关闭</el-button>
</div>
</div>
......@@ -45,113 +44,105 @@
</template>
<script>
import personInfoTable from './personInfoTable'
import { addJtfcCxjgXx } from '@/api/sqcx'
import personInfoTable from "./personInfoTable";
import { addJtfcCxjgXx } from "@/api/sqcx";
import { datas, sendThis } from "./addjtfcdata";
export default {
components: {
personInfoTable
personInfoTable,
},
props: {
value: { type: Boolean, default: false },
},
mounted () {
mounted() {
sendThis(this);
// this.form.sqrList=_.cloneDeep(this.newData);
// this.form.qlrList=_.cloneDeep(this.newData);
},
data () {
data() {
return {
myValue: this.value,
ruleForm: {
cxyt: '',
ycyrgx: 1,
cxlx: '1' //查询类型 1:房产查询 2:登记簿查询
},
isSearch: false,
dataList: [{
sqrxm: '',
sqrzjlxbm: '',
sqrzjhm: '',
lxdh: '',
inputErr: false
}],
sqdataList: [],
qldataList: [],
options: [{
name: '1',
value: 1
}],
searchData: {
columns: datas.columns(),
data: [],
newData: [
{
sqrxm: "",
sqrzjlxbm: "",
sqrzjhm: "",
lxdh: "",
inputErr: false,
},
addJtfc: {
djSqcxDO: {},
sqrList: [],
qlrList: [],
}
}
],
cxjgColumns: datas.columns(),
form: {
djSqcxDO: { ycyrgx: "1", cxyt: "" },
sqrList: this.newData,
qlrList: this.newData,
cxjgList: [],
dyjlList: [],
},
};
},
watch: {
value (val) {
this.myValue = val
this.qldataList = _.cloneDeep(this.dataList)
this.sqdataList = _.cloneDeep(this.dataList)
this.addJtfc.sqrList = _.cloneDeep(this.dataList)
this.addJtfc.qlrList = _.cloneDeep(this.dataList)
},
'ruleForm.ycyrgx' (val) {
if (val != 1) {
this.qldataList = _.cloneDeep(this.dataList)
this.addJtfc.qlrList = _.cloneDeep(this.dataList)
value(val) {
this.myValue = val;
// this.qldataList = _.cloneDeep(this.dataList)
// this.sqdataList = _.cloneDeep(this.dataList)
// this.addJtfc.sqrList = _.cloneDeep(this.dataList)
// this.addJtfc.qlrList = _.cloneDeep(this.dataList)
},
"form.djSqcxDO.ycyrgx"(val) {
if (val == "1") {
this.$alert(this.form.sqrList);
this.form.qlrList = this.form.sqrList;
} else {
this.qldataList = this.addJtfc.sqrList
this.addJtfc.qlrList = this.addJtfc.sqrList
}
this.form.qlrList = [];
this.form.qlrList.push(this.newData);
}
},
"form.djSqcxDO.ycyrgx": {
handler(newValue, oldName) {},
},
},
methods: {
closeDialog () {
this.$emit('input', false)
},
handleGetSqList (val) {
if (!_.isEqual(val, this.dataList) && this.ruleForm.ycyrgx == 1) {
this.qldataList = val
this.addJtfc.qlrList = val
} else
this.addJtfc.sqrList = val
},
handleGetQlList (val) {
if (this.ruleForm.ycyrgx != 1) {
this.addJtfc.qlrList = val
}
closeDialog() {
this.$emit("input", false);
},
queryChick () {
this.addJtfc.djSqcxDO = { ...this.ruleForm }
addJtfcCxjgXx(this.addJtfc).then(res => {
this.searchData.data = res.result;
this.isSearch = true
})
handleGetSqList(val) {
// if (!_.isEqual(val, this.dataList) && this.ruleForm.ycyrgx == 1) {
// this.qldataList = val
// this.addJtfc.qlrList = val
// } else
// this.addJtfc.sqrList = val
},
resetClick () {
this.qldataList = _.cloneDeep(this.dataList)
this.sqdataList = _.cloneDeep(this.dataList)
handleGetQlList(val) {
// if (this.ruleForm.ycyrgx != 1) {
// this.addJtfc.qlrList = val
// }
},
handleRead (row) { },
queryChick() {
addJtfcCxjgXx(this.form).then((res) => {
if (res.code == 200) {
this.$alert("ddd");
}
// this.searchData.data = res.result;
// this.isSearch = true
});
},
resetClick() {
this.form.djSqcxDO = { ycyrgx: "1", cxyt: "" };
this.form.sqrList = _.cloneDeep(this.dataList);
this.form.qlrList = _.cloneDeep(this.dataList);
},
handleRead(row) {},
//抵押
dyClick () {
},
dyClick() {},
//查封
cfClick () {
}
}
}
cfClick() {},
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
......
......@@ -32,11 +32,11 @@ export default {
{
width: '60',
renderHeader: (h, scope) => {
return <i class="el-icon-plus pointer" onClick={() => { this.handleAdd() }} style="color:#409EFF"></i>
return <i class="el-icon-plus pointer" onClick={() => { this.add() }} style="color:#409EFF"></i>
},
render: (h, scope) => {
return (
<i class="el-icon-minus pointer" onClick={() => { this.handleMinus(scope.$index, scope.row) }}></i>
<i class="el-icon-minus pointer" onClick={() => { this.remove(scope.$index, scope.row) }}></i>
)
}
},
......@@ -113,27 +113,28 @@ export default {
}
}
},
watch: {
'tableData.data': {
handler (newValue, oldName) {
if (newValue.length != 0) {
this.$emit('getInfoList', newValue)
}
},
deep: true,
immediate: true
},
dataList: {
handler (newValue, oldName) {
this.tableData.data = _.cloneDeep(newValue)
console.log(this.tableData.data, 'this.tableData.datathis.tableData.data');
},
deep: true,
immediate: true
},
},
// watch: {
// 'tableData.data': {
// handler (newValue, oldName) {
// if (newValue.length != 0) {
// this.$alert(newValue);
// //this.$emit('getInfoList', newValue)
// }
// },
// deep: true,
// immediate: true
// },
// dataList: {
// handler (newValue, oldName) {
// this.tableData.data = _.cloneDeep(newValue)
// console.log(this.tableData.data, 'this.tableData.datathis.tableData.data');
// },
// deep: true,
// immediate: true
// },
// },
methods: {
handleAdd () {
add () {
this.tableData.data.push({
sqrxm: '',
sqrzjlxbm: '',
......@@ -142,7 +143,7 @@ export default {
inputErr: false
})
},
handleMinus (index, row) {
remove (index, row) {
this.tableData.data.splice(index, 1)
},
teltest (row) {
......
......@@ -54,7 +54,7 @@ class data extends filter {
render: (h, scope) => {
switch (scope.row.ycyrgx) {
case '1':
return <div>权利人</div>
return <div>房屋权利人</div>
case '2':
return <div>产权利害关系人</div>
case '3':
......
......@@ -7,52 +7,27 @@
<el-row>
<el-col :span="5">
<el-form-item label="权利类型">
<el-select
v-model="queryForm.qllx"
filterable
clearable
placeholder="请选择权利类型"
>
<el-option
v-for="item in qllxs"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
<el-option v-for="item in qllxs" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="不动产单元号">
<el-input
placeholder="请输入不动产单元号"
v-model="queryForm.bdcdyh"
clearable
class="width200px"
>
<el-input placeholder="请输入不动产单元号" v-model="queryForm.bdcdyh" clearable class="width200px">
</el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="业务号">
<el-input
placeholder="请输入业务号"
v-model="queryForm.ywh"
clearable
class="width200px"
>
<el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px">
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="不动产权证号">
<el-input
placeholder="请输入不动产权证号"
v-model="queryForm.bdcqzh"
clearable
class="width200px"
>
<el-input placeholder="请输入不动产权证号" v-model="queryForm.bdcqzh" clearable class="width200px">
</el-input>
</el-form-item>
</el-col>
......@@ -66,26 +41,15 @@
</div>
<!-- 表格 -->
<div class="from-clues-content">
<lb-table
ref="table"
@row-click="handleRowClick"
:page-size="pageData.pageSize"
:heightNum="400"
:current-page.sync="pageData.currentPage"
:total="tableData.total"
@size-change="handleSizeChange"
@p-current-change="handleCurrentChange"
@selection-change="handleSelectionChange"
:column="tableData.columns"
:data="tableData.data"
>
<lb-table ref="table" @row-click="handleRowClick" :page-size="pageData.pageSize" :heightNum="400"
:current-page.sync="pageData.currentPage" :total="tableData.total" @size-change="handleSizeChange"
@p-current-change="handleCurrentChange" @selection-change="handleSelectionChange" :column="tableData.columns"
:data="tableData.data">
</lb-table>
</div>
<div class="submit_button">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" plain @click="submitFormClick()"
>发起申请</el-button
>
<el-button type="primary" plain @click="submitFormClick()">发起申请</el-button>
</div>
</div>
</template>
......@@ -143,8 +107,8 @@ export default {
startBusinessFlow({
bsmSqyw: this.sqywInfo.parentid,
bdcdysz: this.bdcdysz,
djqxbm: this.sqywInfo.nodetype=="djqx"?this.sqywInfo.nodecode:"",
djqxmc: this.sqywInfo.nodetype=="djqx"?this.sqywInfo.nodename:"",
djqxbm: this.sqywInfo.nodetype == "djqx" ? this.sqywInfo.nodecode : "",
djqxmc: this.sqywInfo.nodetype == "djqx" ? this.sqywInfo.nodename : "",
}).then((res) => {
if (res.code == 200) {
this.$message({
......
......@@ -7,52 +7,27 @@
<el-row>
<el-col :span="5">
<el-form-item label="权利类型">
<el-select
v-model="queryForm.qllx"
filterable
clearable
placeholder="请选择权利类型"
>
<el-option
v-for="item in qllxData"
:key="item.sxzdz"
:label="item.sxzdmc"
:value="item.sxzdz"
>
<el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
<el-option v-for="item in qllxData" :key="item.sxzdz" :label="item.sxzdmc" :value="item.sxzdz">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="不动产单元号">
<el-input
placeholder="请输入不动产单元号"
v-model="queryForm.bdcdyh"
clearable
class="width200px"
>
<el-input placeholder="请输入不动产单元号" v-model="queryForm.bdcdyh" clearable class="width200px">
</el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="业务号">
<el-input
placeholder="请输入业务号"
v-model="queryForm.ywh"
clearable
class="width200px"
>
<el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px">
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="不动产权证号">
<el-input
placeholder="请输入不动产权证号"
v-model="queryForm.bdcqzh"
clearable
class="width200px"
>
<el-input placeholder="请输入不动产权证号" v-model="queryForm.bdcqzh" clearable class="width200px">
</el-input>
</el-form-item>
</el-col>
......@@ -66,19 +41,10 @@
</div>
<!-- 表格 -->
<div class="from-clues-content">
<lb-table
ref="table"
@row-click="handleRowClick"
:page-size="pageData.pageSize"
:heightNum="400"
:current-page.sync="pageData.currentPage"
:total="tableData.total"
@size-change="handleSizeChange"
@p-current-change="handleCurrentChange"
@selection-change="handleSelectionChange"
:column="tableData.columns"
:data="tableData.data"
>
<lb-table ref="table" @row-click="handleRowClick" :page-size="pageData.pageSize" :heightNum="400"
:current-page.sync="pageData.currentPage" :total="tableData.total" @size-change="handleSizeChange"
@p-current-change="handleCurrentChange" @selection-change="handleSelectionChange" :column="tableData.columns"
:data="tableData.data">
</lb-table>
</div>
<div class="submit_button">
......@@ -155,8 +121,8 @@ export default {
startBusinessFlow({
bsmSqyw: this.bsmSqyw,
bdcdysz: this.bdcdysz,
djqxbm: this.sqywInfo.nodetype=="djqx"?this.sqywInfo.nodecode:"",
djqxmc: this.sqywInfo.nodetype=="djqx"?this.sqywInfo.nodename:"",
djqxbm: this.sqywInfo.nodetype == "djqx" ? this.sqywInfo.nodecode : "",
djqxmc: this.sqywInfo.nodetype == "djqx" ? this.sqywInfo.nodename : "",
}).then((res) => {
if (res.code == 200) {
this.$message({
......
......@@ -7,34 +7,19 @@
<el-row>
<el-col :span="8">
<el-form-item label="不动产权证号">
<el-input
placeholder="请输入不动产权证号"
v-model="queryForm.bdcqzh"
clearable
class="width200px"
>
<el-input placeholder="请输入不动产权证号" v-model="queryForm.bdcqzh" clearable class="width200px">
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="不动产单元号">
<el-input
placeholder="请输入不动产单元号"
v-model="queryForm.bdcdyh"
clearable
class="width200px"
>
<el-input placeholder="请输入不动产单元号" v-model="queryForm.bdcdyh" clearable class="width200px">
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="坐落">
<el-input
placeholder=""
v-model="queryForm.zl"
clearable
class="width200px"
>
<el-input placeholder="" v-model="queryForm.zl" clearable class="width200px">
</el-input>
</el-form-item>
</el-col>
......@@ -48,19 +33,10 @@
</div>
<!-- 表格 -->
<div class="from-clues-content">
<lb-table
ref="table"
@row-click="handleRowClick"
:page-size="pageData.pageSize"
:heightNum="400"
:current-page.sync="pageData.currentPage"
:total="tableData.total"
@size-change="handleSizeChange"
@p-current-change="handleCurrentChange"
@selection-change="handleSelectionChange"
:column="tableData.columns"
:data="tableData.data"
>
<lb-table ref="table" @row-click="handleRowClick" :page-size="pageData.pageSize" :heightNum="400"
:current-page.sync="pageData.currentPage" :total="tableData.total" @size-change="handleSizeChange"
@p-current-change="handleCurrentChange" @selection-change="handleSelectionChange" :column="tableData.columns"
:data="tableData.data">
</lb-table>
</div>
<div class="submit_button">
......@@ -122,19 +98,19 @@ export default {
startBusinessFlow({
bsmSqyw: this.sqywInfo.bsmSqyw,
bdcdysz: this.bdcdysz,
djqxbm: this.sqywInfo.nodetype=="djqx"?this.sqywInfo.nodecode:"",
djqxmc: this.sqywInfo.nodetype=="djqx"?this.sqywInfo.nodename:"",
djqxbm: this.sqywInfo.nodetype == "djqx" ? this.sqywInfo.nodecode : "",
djqxmc: this.sqywInfo.nodetype == "djqx" ? this.sqywInfo.nodename : "",
}).then((res) => {
if (res.code == 200) {
this.$message({
showClose: true,
message: '发起申请成功',
type: 'success'
})
message: "发起申请成功",
type: "success",
});
if (!this.isJump) {
this.jump(res.result, this.sqywInfo.djywbm)
this.jump(res.result, this.sqywInfo.djywbm);
} else {
this.$emit('updateDialog', true)
this.$emit("updateDialog", true);
}
} else {
this.$message.error(res.message);
......
......@@ -65,7 +65,7 @@ export default {
isJump: { type: Boolean, default: false },
sqywInfo: { type: Object, default: () => {} },
},
data () {
data() {
return {
queryForm: defaultParameters.defaultParameters(),
tableData: {
......@@ -76,19 +76,19 @@ export default {
bdcdysz: [],
};
},
mounted () {
mounted() {
sendThis(this);
},
methods: {
//点击行选中或取消复选框
handleRowClick (row, column, event) {
handleRowClick(row, column, event) {
//通过ref绑定后这里使用$refs.table来操作bom元素
this.$refs.table.toggleRowSelection(row);
},
closeDialog () {
closeDialog() {
this.$emit("closeDialog");
},
fetchData () {
fetchData() {
this.queryForm.sqywbm = this.sqywInfo.djywbm;
selectJsydQlxx({ ...this.queryForm, ...this.pageData }).then((res) => {
if (res.code === 200) {
......@@ -96,9 +96,9 @@ export default {
this.tableData.total = total;
this.tableData.data = records;
}
})
});
},
submitForm () {
submitForm() {
if (this.bdcdysz.length == 0) {
this.$message.error("请至少选择一条数据");
return;
......@@ -106,40 +106,45 @@ export default {
startBusinessFlow({
bsmSqyw: this.sqywInfo.parentid,
bdcdysz: this.bdcdysz,
djqxbm: this.sqywInfo.nodetype=="djqx"?this.sqywInfo.nodecode:"",
djqxmc: this.sqywInfo.nodetype=="djqx"?this.sqywInfo.nodename:"",
djqxbm: this.sqywInfo.nodetype == "djqx" ? this.sqywInfo.nodecode : "",
djqxmc: this.sqywInfo.nodetype == "djqx" ? this.sqywInfo.nodename : "",
}).then((res) => {
if (res.code == 200) {
this.$message({
showClose: true,
message: '发起申请成功',
type: 'success'
})
message: "发起申请成功",
type: "success",
});
if (!this.isJump) {
this.jump(res.result, this.sqywInfo.djywbm)
this.jump(res.result, this.sqywInfo.djywbm);
} else {
this.$emit('updateDialog', true)
this.$emit("updateDialog", true);
}
} else {
this.$message.error(res.message);
}
})
});
},
handleSelectionChange (val) {
handleSelectionChange(val) {
val.forEach((item, index) => {
item.bsmSsql = item.bsmQlxx
item.ybdcqzsh = item.bdcqzh
})
item.bsmSsql = item.bsmQlxx;
item.ybdcqzsh = item.bdcqzh;
});
this.bdcdysz = val;
},
openBook (row) {
var param = { bdcdyid: row.bdcdyid, qllx: row.qllx, bdcdyh: row.bdcdyh, bsmQlxx: row.bsmQlxx };
this.$popup('登记簿详情', 'registerBook/djbFrame', {
formData: param
})
}
}
}
openBook(row) {
var param = {
bdcdyid: row.bdcdyid,
qllx: row.qllx,
bdcdyh: row.bdcdyh,
bsmQlxx: row.bsmQlxx,
};
this.$popup("登记簿详情", "registerBook/djbFrame", {
formData: param,
});
},
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
......
......@@ -51,7 +51,7 @@ export default {
isJump: { type: Boolean, default: false },
sqywInfo: { type: Object, default: () => {} },
},
data () {
data() {
return {
queryForm: defaultParameters.defaultParameters(),
tableData: {
......@@ -66,22 +66,22 @@ export default {
: this.sqywInfo.parentid,
};
},
mounted () {
mounted() {
sendThis(this);
},
methods: {
//点击行选中或取消复选框
handleRowClick (row, column, event) {
handleRowClick(row, column, event) {
//通过ref绑定后这里使用$refs.table来操作bom元素
this.$refs.table.toggleRowSelection(row);
},
closeDialog () {
closeDialog() {
this.$emit("closeDialog");
},
queryClick () {
this.fetchData()
queryClick() {
this.fetchData();
},
fetchData () {
fetchData() {
this.queryForm.sqywbm = this.sqywInfo.djywbm;
selectZdjbxx({ ...this.queryForm, ...this.pageData }).then((res) => {
if (res.code === 200) {
......@@ -91,7 +91,7 @@ export default {
}
});
},
submitForm () {
submitForm() {
if (this.bdcdysz.length == 0) {
this.$alert("请至少选择一条数据");
return;
......@@ -99,30 +99,30 @@ export default {
startBusinessFlow({
bsmSqyw: this.bsmSqyw,
bdcdysz: this.bdcdysz,
djqxbm: this.sqywInfo.nodetype=="djqx"?this.sqywInfo.nodecode:"",
djqxmc: this.sqywInfo.nodetype=="djqx"?this.sqywInfo.nodename:"",
djqxbm: this.sqywInfo.nodetype == "djqx" ? this.sqywInfo.nodecode : "",
djqxmc: this.sqywInfo.nodetype == "djqx" ? this.sqywInfo.nodename : "",
}).then((res) => {
if (res.code == 200) {
this.$message({
showClose: true,
message: '发起申请成功',
type: 'success'
})
message: "发起申请成功",
type: "success",
});
if (!this.isJump) {
this.jump(res.result, this.djywbm)
this.jump(res.result, this.djywbm);
} else {
this.$emit('updateDialog', true)
this.$emit("updateDialog", true);
}
} else {
this.$alert(res.message);
}
})
});
},
handleSelectionChange (val) {
handleSelectionChange(val) {
this.bdcdysz = val;
}
}
}
},
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
......