Commit 078be1b2 authored by 井熙铎's avatar 井熙铎

类型状态类数据取值赋值

parent 9ec58dc4
......@@ -12,12 +12,24 @@
</div>
<!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="100%" hight="100%">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="130px">
<el-form ref="form" :model="form" :disabled="crud.status.CHECK" :rules="rules" size="small" label-width="130px">
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="证件类型" prop="zjlx">
<el-input v-model="form.zjlx" style="width: 370px" :disabled="true" />
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='01'">
<el-input value ="身份证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='02'">
<el-input value ="军官证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='03'">
<el-input value ="护照" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='04'">
<el-input value ="外国人永久居留证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='99'">
<el-input value ="其他" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -30,8 +42,14 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="状态" prop="status">
<el-input v-model="form.status" type="textarea" style="width: 370px" :disabled="true" />
<el-form-item label="状态" prop="status" v-if="form.status == '0'">
<el-input value="待发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '1'">
<el-input value="已发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '2'">
<el-input value="已接收结果" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -124,9 +142,9 @@
</template>
</el-table-column>
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column prop="zjlx" label="证件类型" />
<el-table-column prop="zjlx" label="证件类型" :formatter="zjlxFormat"/>
<el-table-column prop="zjhm" label="证件号码" />
<el-table-column prop="status" label="状态" />
<el-table-column prop="status" label="状态" :formatter="statusFormat"/>
<el-table-column prop="xingming" label="姓名" />
<el-table-column prop="crrq" label="插入日期" />
</el-table>
......@@ -150,7 +168,13 @@ export default {
name: 'Dkbscx',
components: { Retrieve, pagination, rrOperation, DateRangePicker, crudOperation },
cruds() {
return CRUD({ title: '贷款笔数查询', url: 'api/DkbscxController', crudMethod: {}})
return CRUD({ title: '贷款笔数查询', url: 'api/DkbscxController', crudMethod: {},optShow: {
add: false,
edit: false,
del: false,
download: false,
reset: true
}})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
......@@ -173,6 +197,36 @@ export default {
}
},
methods: {
/**
* @param row 当前行元素
* @returns {string}
*/
zjlxFormat(row) {
switch (row.zjlx) {
case '01':
return "身份证";
case '02':
return "军官证";
case '03':
return "护照";
case '04':
return "外国人永久居住证";
case '99':
return "其他";
}
},
statusFormat(row) {
switch (row.status) {
case '0':
return "待发送";
case '1':
return "已发送";
case '2':
return "已接收结果";
}
},
testConnectServer() {
this.$refs['form'].validate((valid) => {
if (valid) {
......
......@@ -12,12 +12,24 @@
</div>
<!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="100%" hight="100%">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="130px">
<el-form ref="form" :model="form" :disabled="crud.status.CHECK" :rules="rules" size="small" label-width="130px">
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="证件类型" prop="zjlx">
<el-input v-model="form.zjlx" style="width: 370px" :disabled="true" />
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='01'">
<el-input value ="身份证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='02'">
<el-input value ="军官证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='03'">
<el-input value ="护照" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='04'">
<el-input value ="外国人永久居留证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='99'">
<el-input value ="其他" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -30,8 +42,14 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="状态" prop="status">
<el-input v-model="form.status" type="textarea" style="width: 370px" :disabled="true" />
<el-form-item label="状态" prop="status" v-if="form.status == '0'">
<el-input value="待发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '1'">
<el-input value="已发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '2'">
<el-input value="已接收结果" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -62,15 +80,36 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple-light">
<el-form-item label="贷款中心名称" prop="DKZXMC">
<el-form-item label="贷款中心名称" prop="DKZXMC" >
<el-input v-model="form.DKZXMC" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="贷款状态" prop="DKZT">
<el-input v-model="form.DKZT" style="width: 370px" :disabled="true" />
<el-form-item label="贷款状态" prop="DKZT" v-if="form.DKZT == '1'">
<el-input value="正常" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="贷款状态" prop="DKZT" v-if="form.DKZT == '2'">
<el-input value="逾期" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="贷款状态" prop="DKZT" v-if="form.DKZT == '3'">
<el-input value="结清" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="贷款状态" prop="DKZT" v-if="form.DKZT == '4'">
<el-input value="核消" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="贷款状态" prop="DKZT" v-if="form.DKZT == '5'">
<el-input value="放款失败" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="贷款状态" prop="DKZT" v-if="form.DKZT == '6'">
<el-input value="核消收回结清" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="贷款状态" prop="DKZT" v-if="form.DKZT == '7'">
<el-input value="回转结清" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="贷款状态" prop="DKZT" v-if="form.DKZT == '8'">
<el-input value="轮候期到期结清" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
......@@ -78,8 +117,11 @@
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="是否共同借款人" prop="SFGTJKR">
<el-input v-model="form.SFGTJKR" style="width: 370px" :disabled="true" />
<el-form-item label="是否共同借款人" prop="SFGTJKR" v-if="form.SFGTJKR == '00'">
<el-input value="共同借款人" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="是否共同借款人" prop="SFGTJKR" v-if="form.SFGTJKR == '01'">
<el-input value="主借款人" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
......@@ -115,9 +157,9 @@
</template>
</el-table-column>
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column prop="zjlx" label="证件类型" />
<el-table-column prop="zjlx" label="证件类型" :formatter="zjlxFormat"/>
<el-table-column prop="zjhm" label="证件号码" />
<el-table-column prop="status" label="状态" />
<el-table-column prop="status" label="状态" :formatter="statusFormat"/>
<el-table-column prop="xingming" label="姓名" />
<el-table-column prop="crrq" label="插入日期" />
</el-table>
......@@ -141,7 +183,13 @@ export default {
name: 'Dkzlcx',
components: { Retrieve, pagination, rrOperation, DateRangePicker, crudOperation },
cruds() {
return CRUD({ title: '贷款纵览详情', url: 'api/DkzlcxController', crudMethod: {}})
return CRUD({ title: '贷款纵览详情', url: 'api/DkzlcxController', crudMethod: {},optShow: {
add: false,
edit: false,
del: false,
download: false,
reset: true
}})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
......@@ -164,6 +212,36 @@ export default {
}
},
methods: {
/**
* @param row 当前行元素
* @returns {string}
*/
zjlxFormat(row) {
switch (row.zjlx) {
case '01':
return "身份证";
case '02':
return "军官证";
case '03':
return "护照";
case '04':
return "外国人永久居住证";
case '99':
return "其他";
}
},
statusFormat(row) {
switch (row.status) {
case '0':
return "待发送";
case '1':
return "已发送";
case '2':
return "已接收结果";
}
},
testConnectServer() {
this.$refs['form'].validate((valid) => {
if (valid) {
......
......@@ -12,12 +12,25 @@
</div>
<!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="100%" hight="100%">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="130px">
<el-form ref="form" :model="form" :disabled="crud.status.CHECK" :rules="rules" size="small" label-width="130px">
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="证件类型" prop="zjlx">
<el-input v-model="form.zjlx" style="width: 370px" :disabled="true" />
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='01'">
<el-input value ="身份证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='02'">
<el-input value ="军官证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='03'">
<el-input value ="护照" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='04'">
<el-input value ="外国人永久居留证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='99'">
<el-input value ="其他" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -30,8 +43,14 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="状态" prop="status">
<el-input v-model="form.status" type="textarea" style="width: 370px" :disabled="true" />
<el-form-item label="状态" prop="status" v-if="form.status == '0'">
<el-input value="待发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '1'">
<el-input value="已发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '2'">
<el-input value="已接收结果" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -55,8 +74,11 @@
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="是否结清" prop="SFJQ">
<el-input v-model="form.SFJQ" style="width: 370px" :disabled="true" />
<el-form-item label="是否结清" prop="SFJQ" v-if="form.SFJQ == '00'">
<el-input value="已结清" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="是否结清" prop="SFJQ" v-if="form.SFJQ == '01'">
<el-input value="未结清" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
......@@ -93,9 +115,9 @@
</template>
</el-table-column>
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column prop="zjlx" label="证件类型" />
<el-table-column prop="zjlx" label="证件类型" :formatter="zjlxFormat"/>
<el-table-column prop="zjhm" label="证件号码" />
<el-table-column prop="status" label="状态" />
<el-table-column prop="status" label="状态" :formatter="statusFormat"/>
<el-table-column prop="xingming" label="姓名" />
<el-table-column prop="crrq" label="插入日期" />
</el-table>
......@@ -119,7 +141,13 @@ export default {
name: 'Grdkjqjy',
components: { Retrieve, pagination, rrOperation, DateRangePicker, crudOperation },
cruds() {
return CRUD({ title: '个人贷款结清校验', url: 'api/GrdkjqjyController', crudMethod: {}})
return CRUD({ title: '个人贷款结清校验', url: 'api/GrdkjqjyController', crudMethod: {},optShow: {
add: false,
edit: false,
del: false,
download: false,
reset: true
}})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
......@@ -142,6 +170,38 @@ export default {
}
},
methods: {
/**
* @param row 当前行元素
* @returns {string}
*/
zjlxFormat(row) {
switch (row.zjlx) {
case '01':
return "身份证";
case '02':
return "军官证";
case '03':
return "护照";
case '04':
return "外国人永久居住证";
case '99':
return "其他";
}
},
statusFormat(row) {
switch (row.status) {
case '0':
return "待发送";
case '1':
return "已发送";
case '2':
return "已接收结果";
}
},
testConnectServer() {
this.$refs['form'].validate((valid) => {
if (valid) {
......
......@@ -18,8 +18,20 @@
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="证件类型" prop="zjlx">
<el-input v-model="form.zjlx" style="width: 370px"/>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='01'">
<el-input value ="身份证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='02'">
<el-input value ="军官证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='03'">
<el-input value ="护照" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='04'">
<el-input value ="外国人永久居留证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='99'">
<el-input value ="其他" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -32,8 +44,14 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="状态" prop="status">
<el-input v-model="form.status" type="textarea" style="width: 370px"/>
<el-form-item label="状态" prop="status" v-if="form.status == '0'">
<el-input value="待发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '1'">
<el-input value="已发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '2'">
<el-input value="已接收结果" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -87,8 +105,20 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple-light">
<el-form-item label="个人账户状态" prop="GRZHZT">
<el-input v-model="form.GRZHZT" style="width: 370px"/>
<el-form-item label="个人账户状态" prop="GRZHZT" v-if="form.GRZHZT == '01'">
<el-input value ="正常" style="width: 370px"/>
</el-form-item>
<el-form-item label="个人账户状态" prop="GRZHZT" v-if="form.GRZHZT == '02'">
<el-input value ="封存" style="width: 370px"/>
</el-form-item>
<el-form-item label="个人账户状态" prop="GRZHZT" v-if="form.GRZHZT == '05'">
<el-input value ="销户" style="width: 370px"/>
</el-form-item>
<el-form-item label="个人账户状态" prop="GRZHZT" v-if="form.GRZHZT == '06'">
<el-input value ="冻结" style="width: 370px"/>
</el-form-item>
<el-form-item label="个人账户状态" prop="GRZHZT" v-if="form.GRZHZT == '99'">
<el-input value ="其他" style="width: 370px"/>
</el-form-item>
</div>
</el-col>
......@@ -137,7 +167,7 @@
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column prop="zjlx" label="证件类型" :formatter="zjlxFormat"/>
<el-table-column prop="zjhm" label="证件号码"/>
<el-table-column prop="status" label="状态"/>
<el-table-column prop="status" label="状态" :formatter="statusFormat"/>
<el-table-column prop="xingming" label="姓名"/>
<el-table-column prop="crrq" label="插入日期"/>
</el-table>
......@@ -174,10 +204,13 @@ export default {
},
})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
return {
//明细请求参数
queryList: {
status: true,
url: "api/JczlcxController/QueryJczlcxFhmx",
......@@ -197,6 +230,7 @@ export default {
}
},
methods: {
/**
* @param row 当前行元素
* @returns {string}
......@@ -215,6 +249,18 @@ export default {
return "其他";
}
},
statusFormat(row) {
switch (row.status) {
case '0':
return "待发送";
case '1':
return "已发送";
case '2':
return "已接收结果";
}
},
testConnectServer() {
this.$refs['form'].validate((valid) => {
if (valid) {
......
......@@ -12,12 +12,24 @@
</div>
<!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="100%" hight="100%">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="130px">
<el-form ref="form" :model="form" :disabled="crud.status.CHECK" :rules="rules" size="small" label-width="130px">
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="证件类型" prop="zjlx">
<el-input v-model="form.zjlx" style="width: 370px" :disabled="true" />
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='01'">
<el-input value ="身份证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='02'">
<el-input value ="军官证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='03'">
<el-input value ="护照" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='04'">
<el-input value ="外国人永久居留证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='99'">
<el-input value ="其他" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -30,8 +42,14 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="状态" prop="status">
<el-input v-model="form.status" type="textarea" style="width: 370px" :disabled="true" />
<el-form-item label="状态" prop="status" v-if="form.status == '0'">
<el-input value="待发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '1'">
<el-input value="已发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '2'">
<el-input value="已接收结果" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -100,9 +118,9 @@
</template>
</el-table-column>
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column prop="zjlx" label="证件类型" />
<el-table-column prop="zjlx" label="证件类型" :formatter="zjlxFormat"/>
<el-table-column prop="zjhm" label="证件号码" />
<el-table-column prop="status" label="状态" />
<el-table-column prop="status" label="状态" :formatter="statusFormat"/>
<el-table-column prop="zxbh" label="中心编号" />
<el-table-column prop="grzh" label="个人账号" />
</el-table>
......@@ -127,7 +145,13 @@ export default {
components: { Retrieve, pagination, rrOperation, DateRangePicker, crudOperation },
cruds() {
return CRUD(
{ title: '连续缴存校验', url: 'api/LxjcjyController', crudMethod: {}})
{ title: '连续缴存校验', url: 'api/LxjcjyController', crudMethod: {},optShow: {
add: false,
edit: false,
del: false,
download: false,
reset: true
}})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
......@@ -149,6 +173,37 @@ export default {
}
},
methods: {
/**
* @param row 当前行元素
* @returns {string}
*/
zjlxFormat(row) {
switch (row.zjlx) {
case '01':
return "身份证";
case '02':
return "军官证";
case '03':
return "护照";
case '04':
return "外国人永久居住证";
case '99':
return "其他";
}
},
statusFormat(row) {
switch (row.status) {
case '0':
return "待发送";
case '1':
return "已发送";
case '2':
return "已接收结果";
}
},
testConnectServer() {
this.$refs['form'].validate((valid) => {
if (valid) {
......
......@@ -182,7 +182,13 @@ export default {
name: 'Qyxxcx',
components: { pagination, rrOperation, retrieve, DateRangePicker, crudOperation },
cruds() {
return CRUD({ title: '企业信息详情', url: 'api/QyxxcxController', crudMethod: {}})
return CRUD({ title: '企业信息详情', url: 'api/QyxxcxController', crudMethod: {},optShow: {
add: false,
edit: false,
del: false,
download: false,
reset: true
}})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
......
<template>
<div class="crud-opts">
<el-button-group class="crud-opts-right">
<el-button
size="mini"
plain
type="info"
icon="el-icon-search"
@click="toggleSearch()"
/>
<el-button
size="mini"
icon="el-icon-refresh"
@click="crud.refresh()"
/>
<el-popover
placement="bottom-end"
width="150"
trigger="click"
>
<el-button
slot="reference"
size="mini"
icon="el-icon-s-grid"
>
<i
class="fa fa-caret-down"
aria-hidden="true"
/>
</el-button>
<el-checkbox
v-model="allColumnsSelected"
:indeterminate="allColumnsSelectedIndeterminate"
@change="handleCheckAllChange"
>
全选
</el-checkbox>
<el-checkbox
v-for="item in tableColumns"
:key="item.property"
v-model="item.visible"
@change="handleCheckedTableColumnsChange(item)"
>
{{ item.label }}
</el-checkbox>
</el-popover>
</el-button-group>
</div>
</template>
<script>
import CRUD, { crud } from '@crud/crud'
function sortWithRef(src, ref) {
const result = Object.assign([], ref)
let cursor = -1
src.forEach(e => {
const idx = result.indexOf(e)
if (idx === -1) {
cursor += 1
result.splice(cursor, 0, e)
} else {
cursor = idx
}
})
return result
}
export default {
mixins: [crud()],
props: {
permission: {
type: Object,
default: () => { return {} }
},
hiddenColumns: {
type: Array,
default: () => { return [] }
},
ignoreColumns: {
type: Array,
default: () => { return [] }
}
},
data() {
return {
tableColumns: [],
allColumnsSelected: true,
allColumnsSelectedIndeterminate: false,
tableUnwatcher: null,
// 忽略下次表格列变动
ignoreNextTableColumnsChange: false
}
},
watch: {
'crud.props.table'() {
this.updateTableColumns()
this.tableColumns.forEach(column => {
if (this.hiddenColumns.indexOf(column.property) !== -1) {
column.visible = false
this.updateColumnVisible(column)
}
})
},
'crud.props.table.store.states.columns'() {
this.updateTableColumns()
}
},
created() {
this.crud.updateProp('searchToggle', true)
},
methods: {
updateTableColumns() {
const table = this.crud.getTable()
if (!table) {
this.tableColumns = []
return
}
let cols = null
const columnFilter = e => e && e.type === 'default' && e.property && this.ignoreColumns.indexOf(e.property) === -1
const refCols = table.columns.filter(columnFilter)
if (this.ignoreNextTableColumnsChange) {
this.ignoreNextTableColumnsChange = false
return
}
this.ignoreNextTableColumnsChange = false
const columns = []
const fullTableColumns = table.$children.map(e => e.columnConfig).filter(columnFilter)
cols = sortWithRef(fullTableColumns, refCols)
cols.forEach(config => {
const column = {
property: config.property,
label: config.label,
visible: refCols.indexOf(config) !== -1
}
columns.push(column)
})
this.tableColumns = columns
},
handleCheckAllChange(val) {
if (val === false) {
this.allColumnsSelected = true
return
}
this.tableColumns.forEach(column => {
if (!column.visible) {
column.visible = true
this.updateColumnVisible(column)
}
})
this.allColumnsSelected = val
this.allColumnsSelectedIndeterminate = false
},
handleCheckedTableColumnsChange(item) {
let totalCount = 0
let selectedCount = 0
this.tableColumns.forEach(column => {
++totalCount
selectedCount += column.visible ? 1 : 0
})
if (selectedCount === 0) {
this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
this.$nextTick(function() {
item.visible = true
})
return
}
this.allColumnsSelected = selectedCount === totalCount
this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
this.updateColumnVisible(item)
},
updateColumnVisible(item) {
const table = this.crud.props.table
const vm = table.$children.find(e => e.prop === item.property)
const columnConfig = vm.columnConfig
if (item.visible) {
// 找出合适的插入点
const columnIndex = this.tableColumns.indexOf(item)
vm.owner.store.commit('insertColumn', columnConfig, columnIndex + 1, null)
} else {
vm.owner.store.commit('removeColumn', columnConfig, null)
}
this.ignoreNextTableColumnsChange = true
},
toggleSearch() {
this.crud.props.searchToggle = !this.crud.props.searchToggle
}
}
}
</script>
<style>
.crud-opts {
padding: 4px 0;
display: -webkit-flex;
display: flex;
align-items: center;
}
.crud-opts .crud-opts-right {
margin-left: auto;
}
.crud-opts .crud-opts-right span {
float: left;
}
</style>
<!--分页-->
<template>
<el-pagination
:page-size.sync="page.size"
:total="page.total"
:current-page.sync="page.page"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="crud.sizeChangeHandler($event)"
@current-change="crud.pageChangeHandler"
/>
</template>
<script>
import { pagination } from '@crud/crud'
export default {
mixins: [pagination()]
}
</script>
<!--搜索与重置-->
<template>
<span>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
<el-button v-if="crud.optShow.reset" class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
</span>
</template>
<script>
import { crud } from '@crud/crud'
export default {
mixins: [crud()],
props: {
itemClass: {
type: String,
required: false,
default: ''
}
}
}
</script>
<template>
<div>
<el-button v-permission="permission.edit" :loading="crud.status.cu === 2" :disabled="disabledEdit" size="mini" type="primary" icon="el-icon-chat-line-square" @click="crud.toEdit(data)">
查看详情
</el-button>
<el-popover v-model="pop" v-permission="permission.del" placement="top" width="180" trigger="manual" @show="onPopoverShow" @hide="onPopoverHide">
<p>{{ msg }}</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="doCancel">取消</el-button>
<el-button :loading="crud.dataStatus[crud.getDataId(data)].delete === 2" type="primary" size="mini" @click="crud.doDelete(data)">确定</el-button>
</div>
<!-- 删除按钮,此页面只需要查询,所以注释-->
<!-- <el-button slot="reference" :disabled="disabledDle" type="danger" icon="el-icon-delete" size="mini" @click="toDelete" />-->
</el-popover>
</div>
</template>
<script>
import CRUD, { crud } from '@crud/crud'
export default {
mixins: [crud()],
props: {
data: {
type: Object,
required: true
},
permission: {
type: Object,
required: true
},
disabledEdit: {
type: Boolean,
default: false
},
disabledDle: {
type: Boolean,
default: false
},
msg: {
type: String,
default: '确定删除本条数据吗?'
}
},
data() {
return {
pop: false
}
},
methods: {
doCancel() {
this.pop = false
this.crud.cancelDelete(this.data)
},
toDelete() {
this.pop = true
},
[CRUD.HOOK.afterDelete](crud, data) {
if (data === this.data) {
this.pop = false
}
},
onPopoverShow() {
setTimeout(() => {
document.addEventListener('click', this.handleDocumentClick)
}, 0)
},
onPopoverHide() {
document.removeEventListener('click', this.handleDocumentClick)
},
handleDocumentClick(event) {
this.pop = false
}
}
}
</script>
import { initData, download } from '@/api/data'
import { parseTime, downloadFile } from '@/utils/index'
import Vue from 'vue'
/**
* CRUD配置
* @author moxun
* @param {*} options <br>
* @return crud instance.
* @example
* 要使用多crud时,请在关联crud的组件处使用crud-tag进行标记,如:<jobForm :job-status="dict.job_status" crud-tag="job" />
*/
function CRUD(options) {
const defaultOptions = {
tag: 'default',
// id字段名
idField: 'id',
// 标题
title: '',
// 请求数据的url
url: '',
// 表格数据
data: [],
// 选择项
selections: [],
// 待查询的对象
query: {},
// 查询数据的参数
params: {},
// Form 表单
form: {},
// 重置表单
defaultForm: () => {},
// 排序规则,默认 id 降序, 支持多字段排序 ['id,desc', 'createTime,asc']
sort: ['id,desc'],
// 等待时间
time: 50,
// CRUD Method
crudMethod: {
add: (form) => {},
del: (id) => {},
edit: (form) => {},
get: (id) => {}
},
// 主页操作栏显示哪些按钮
optShow: {
add: true,
edit: true,
del: true,
download: true,
reset: true
},
// 自定义一些扩展属性
props: {},
// 在主页准备
queryOnPresenterCreated: true,
// 调试开关
debug: false
}
options = mergeOptions(defaultOptions, options)
const data = {
...options,
// 记录数据状态
dataStatus: {},
status: {
add: CRUD.STATUS.NORMAL,
edit: CRUD.STATUS.NORMAL,
// 添加或编辑状态
get cu() {
if (this.add === CRUD.STATUS.NORMAL && this.edit === CRUD.STATUS.NORMAL) {
return CRUD.STATUS.NORMAL
} else if (this.add === CRUD.STATUS.PREPARED || this.edit === CRUD.STATUS.PREPARED) {
return CRUD.STATUS.PREPARED
} else if (this.add === CRUD.STATUS.PROCESSING || this.edit === CRUD.STATUS.PROCESSING) {
return CRUD.STATUS.PROCESSING
}
throw new Error('wrong crud\'s cu status')
},
// 标题
get title() {
return this.add > CRUD.STATUS.NORMAL ? `新增${crud.title}` : this.edit > CRUD.STATUS.NORMAL ? `${crud.title}` : crud.title
}
},
msg: {
submit: '提交成功',
add: '新增成功',
edit: '编辑成功',
del: '删除成功'
},
page: {
// 页码
page: 0,
// 每页数据条数
size: 10,
// 总数据条数
total: 0
},
// 整体loading
loading: false,
// 导出的 Loading
downloadLoading: false,
// 删除的 Loading
delAllLoading: false
}
const methods = {
/**
* 通用的提示
*/
submitSuccessNotify() {
crud.notify(crud.msg.submit, CRUD.NOTIFICATION_TYPE.SUCCESS)
},
addSuccessNotify() {
crud.notify(crud.msg.add, CRUD.NOTIFICATION_TYPE.SUCCESS)
},
editSuccessNotify() {
crud.notify(crud.msg.edit, CRUD.NOTIFICATION_TYPE.SUCCESS)
},
delSuccessNotify() {
crud.notify(crud.msg.del, CRUD.NOTIFICATION_TYPE.SUCCESS)
},
// 搜索
toQuery() {
crud.page.page = 1
crud.refresh()
},
// 刷新
refresh() {
if (!callVmHook(crud, CRUD.HOOK.beforeRefresh)) {
return
}
return new Promise((resolve, reject) => {
crud.loading = true
// 请求数据
initData(crud.url, crud.getQueryParams()).then(data => {
const table = crud.getTable()
if (table && table.lazy) { // 懒加载子节点数据,清掉已加载的数据
table.store.states.treeData = {}
table.store.states.lazyTreeNodeMap = {}
}
crud.page.total = data.totalElements
crud.data = data.content
crud.resetDataStatus()
// time 毫秒后显示表格
setTimeout(() => {
crud.loading = false
callVmHook(crud, CRUD.HOOK.afterRefresh)
}, crud.time)
resolve(data)
}).catch(err => {
crud.loading = false
reject(err)
})
})
},
/**
* 启动添加
*/
toAdd() {
crud.resetForm()
if (!(callVmHook(crud, CRUD.HOOK.beforeToAdd, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
return
}
crud.status.add = CRUD.STATUS.PREPARED
callVmHook(crud, CRUD.HOOK.afterToAdd, crud.form)
callVmHook(crud, CRUD.HOOK.afterToCU, crud.form)
},
/**
* 启动编辑
* @param {*} data 数据项
*/
toEdit(data) {
crud.resetForm(JSON.parse(JSON.stringify(data)))
if (!(callVmHook(crud, CRUD.HOOK.beforeToEdit, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
return
}
crud.status.edit = CRUD.STATUS.PREPARED
crud.getDataStatus(crud.getDataId(data)).edit = CRUD.STATUS.PREPARED
callVmHook(crud, CRUD.HOOK.afterToEdit, crud.form)
callVmHook(crud, CRUD.HOOK.afterToCU, crud.form)
},
/**
* 启动删除
* @param {*} data 数据项
*/
toDelete(data) {
crud.getDataStatus(crud.getDataId(data)).delete = CRUD.STATUS.PREPARED
},
/**
* 取消删除
* @param {*} data 数据项
*/
cancelDelete(data) {
if (!callVmHook(crud, CRUD.HOOK.beforeDeleteCancel, data)) {
return
}
crud.getDataStatus(crud.getDataId(data)).delete = CRUD.STATUS.NORMAL
callVmHook(crud, CRUD.HOOK.afterDeleteCancel, data)
},
/**
* 取消新增/编辑
*/
cancelCU() {
const addStatus = crud.status.add
const editStatus = crud.status.edit
if (addStatus === CRUD.STATUS.PREPARED) {
if (!callVmHook(crud, CRUD.HOOK.beforeAddCancel, crud.form)) {
return
}
crud.status.add = CRUD.STATUS.NORMAL
}
if (editStatus === CRUD.STATUS.PREPARED) {
if (!callVmHook(crud, CRUD.HOOK.beforeEditCancel, crud.form)) {
return
}
crud.status.edit = CRUD.STATUS.NORMAL
crud.getDataStatus(crud.getDataId(crud.form)).edit = CRUD.STATUS.NORMAL
}
crud.resetForm()
if (addStatus === CRUD.STATUS.PREPARED) {
callVmHook(crud, CRUD.HOOK.afterAddCancel, crud.form)
}
if (editStatus === CRUD.STATUS.PREPARED) {
callVmHook(crud, CRUD.HOOK.afterEditCancel, crud.form)
}
// 清除表单验证
if (crud.findVM('form').$refs['form']) {
crud.findVM('form').$refs['form'].clearValidate()
}
},
/**
* 提交新增/编辑
*/
submitCU() {
if (!callVmHook(crud, CRUD.HOOK.beforeValidateCU)) {
return
}
crud.findVM('form').$refs['form'].validate(valid => {
if (!valid) {
return
}
if (!callVmHook(crud, CRUD.HOOK.afterValidateCU)) {
return
}
if (crud.status.add === CRUD.STATUS.PREPARED) {
crud.doAdd()
} else if (crud.status.edit === CRUD.STATUS.PREPARED) {
crud.doEdit()
}
})
},
/**
* 执行添加
*/
doAdd() {
if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) {
return
}
crud.status.add = CRUD.STATUS.PROCESSING
crud.crudMethod.add(crud.form).then(() => {
crud.status.add = CRUD.STATUS.NORMAL
crud.resetForm()
crud.addSuccessNotify()
callVmHook(crud, CRUD.HOOK.afterSubmit)
crud.toQuery()
}).catch(() => {
crud.status.add = CRUD.STATUS.PREPARED
callVmHook(crud, CRUD.HOOK.afterAddError)
})
},
/**
* 执行编辑
*/
doEdit() {
if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) {
return
}
crud.status.edit = CRUD.STATUS.PROCESSING
crud.crudMethod.edit(crud.form).then(() => {
crud.status.edit = CRUD.STATUS.NORMAL
crud.getDataStatus(crud.getDataId(crud.form)).edit = CRUD.STATUS.NORMAL
crud.editSuccessNotify()
crud.resetForm()
callVmHook(crud, CRUD.HOOK.afterSubmit)
crud.refresh()
}).catch(() => {
crud.status.edit = CRUD.STATUS.PREPARED
callVmHook(crud, CRUD.HOOK.afterEditError)
})
},
/**
* 执行删除
* @param {*} data 数据项
*/
doDelete(data) {
let delAll = false
let dataStatus
const ids = []
if (data instanceof Array) {
delAll = true
data.forEach(val => {
ids.push(this.getDataId(val))
})
} else {
ids.push(this.getDataId(data))
dataStatus = crud.getDataStatus(this.getDataId(data))
}
if (!callVmHook(crud, CRUD.HOOK.beforeDelete, data)) {
return
}
if (!delAll) {
dataStatus.delete = CRUD.STATUS.PROCESSING
}
return crud.crudMethod.del(ids).then(() => {
if (delAll) {
crud.delAllLoading = false
} else dataStatus.delete = CRUD.STATUS.PREPARED
crud.dleChangePage(1)
crud.delSuccessNotify()
callVmHook(crud, CRUD.HOOK.afterDelete, data)
crud.refresh()
}).catch(() => {
if (delAll) {
crud.delAllLoading = false
} else dataStatus.delete = CRUD.STATUS.PREPARED
})
},
/**
* 通用导出
*/
doExport() {
crud.downloadLoading = true
download(crud.url + '/download', crud.getQueryParams()).then(result => {
downloadFile(result, crud.title + '数据', 'xlsx')
crud.downloadLoading = false
}).catch(() => {
crud.downloadLoading = false
})
},
/**
* 获取查询参数
*/
getQueryParams: function() {
// 清除参数无值的情况
Object.keys(crud.query).length !== 0 && Object.keys(crud.query).forEach(item => {
if (crud.query[item] === null || crud.query[item] === '') crud.query[item] = undefined
})
Object.keys(crud.params).length !== 0 && Object.keys(crud.params).forEach(item => {
if (crud.params[item] === null || crud.params[item] === '') crud.params[item] = undefined
})
return {
page: crud.page.page - 1,
size: crud.page.size,
sort: crud.sort,
...crud.query,
...crud.params
}
},
// 当前页改变
pageChangeHandler(e) {
crud.page.page = e
crud.refresh()
},
// 每页条数改变
sizeChangeHandler(e) {
crud.page.size = e
crud.page.page = 1
crud.refresh()
},
// 预防删除第二页最后一条数据时,或者多选删除第二页的数据时,页码错误导致请求无数据
dleChangePage(size) {
if (crud.data.length === size && crud.page.page !== 1) {
crud.page.page -= 1
}
},
// 选择改变
selectionChangeHandler(val) {
crud.selections = val
},
/**
* 重置查询参数
* @param {Boolean} toQuery 重置后进行查询操作
*/
resetQuery(toQuery = true) {
const defaultQuery = JSON.parse(JSON.stringify(crud.defaultQuery))
const query = crud.query
Object.keys(query).forEach(key => {
query[key] = defaultQuery[key]
})
// 重置参数
this.params = {}
if (toQuery) {
crud.toQuery()
}
},
/**
* 重置表单
* @param {Array} data 数据
*/
resetForm(data) {
const form = data || (typeof crud.defaultForm === 'object' ? JSON.parse(JSON.stringify(crud.defaultForm)) : crud.defaultForm.apply(crud.findVM('form')))
const crudFrom = crud.form
for (const key in form) {
if (crudFrom.hasOwnProperty(key)) {
crudFrom[key] = form[key]
} else {
Vue.set(crudFrom, key, form[key])
}
}
// add by ghl 2020-10-04 页面重复添加信息时,下拉框的校验会存在,需要找工取消
if (crud.findVM('form').$refs['form']) {
crud.findVM('form').$refs['form'].clearValidate()
}
},
/**
* 重置数据状态
*/
resetDataStatus() {
const dataStatus = {}
function resetStatus(datas) {
datas.forEach(e => {
dataStatus[crud.getDataId(e)] = {
delete: 0,
edit: 0
}
if (e.children) {
resetStatus(e.children)
}
})
}
resetStatus(crud.data)
crud.dataStatus = dataStatus
},
/**
* 获取数据状态
* @param {Number | String} id 数据项id
*/
getDataStatus(id) {
return crud.dataStatus[id]
},
/**
* 用于树形表格多选, 选中所有
* @param selection
*/
selectAllChange(selection) {
// 如果选中的数目与请求到的数目相同就选中子节点,否则就清空选中
if (selection && selection.length === crud.data.length) {
selection.forEach(val => {
crud.selectChange(selection, val)
})
} else {
crud.getTable().clearSelection()
}
},
/**
* 用于树形表格多选,单选的封装
* @param selection
* @param row
*/
selectChange(selection, row) {
// 如果selection中存在row代表是选中,否则是取消选中
if (selection.find(val => { return crud.getDataId(val) === crud.getDataId(row) })) {
if (row.children) {
row.children.forEach(val => {
crud.getTable().toggleRowSelection(val, true)
selection.push(val)
if (val.children) {
crud.selectChange(selection, val)
}
})
}
} else {
crud.toggleRowSelection(selection, row)
}
},
/**
* 切换选中状态
* @param selection
* @param data
*/
toggleRowSelection(selection, data) {
if (data.children) {
data.children.forEach(val => {
crud.getTable().toggleRowSelection(val, false)
if (val.children) {
crud.toggleRowSelection(selection, val)
}
})
}
},
findVM(type) {
return crud.vms.find(vm => vm && vm.type === type).vm
},
notify(title, type = CRUD.NOTIFICATION_TYPE.INFO) {
crud.vms[0].vm.$notify({
title,
type,
duration: 2500
})
},
updateProp(name, value) {
Vue.set(crud.props, name, value)
},
getDataId(data) {
return data[this.idField]
},
getTable() {
return this.findVM('presenter').$refs.table
},
attchTable() {
const table = this.getTable()
this.updateProp('table', table)
const that = this
table.$on('expand-change', (row, expanded) => {
if (!expanded) {
return
}
const lazyTreeNodeMap = table.store.states.lazyTreeNodeMap
row.children = lazyTreeNodeMap[crud.getDataId(row)]
if (row.children) {
row.children.forEach(ele => {
const id = crud.getDataId(ele)
if (that.dataStatus[id] === undefined) {
that.dataStatus[id] = {
delete: 0,
edit: 0
}
}
})
}
})
}
}
const crud = Object.assign({}, data)
// 可观测化
Vue.observable(crud)
// 附加方法
Object.assign(crud, methods)
// 记录初始默认的查询参数,后续重置查询时使用
Object.assign(crud, {
defaultQuery: JSON.parse(JSON.stringify(data.query)),
// 预留4位存储:组件 主页、头部、分页、表单,调试查看也方便找
vms: Array(4),
/**
* 注册组件实例
* @param {String} type 类型
* @param {*} vm 组件实例
* @param {Number} index 该参数内部使用
*/
registerVM(type, vm, index = -1) {
const vmObj = {
type,
vm: vm
}
if (index < 0) {
this.vms.push(vmObj)
return
}
if (index < 4) { // 内置预留vm数
this.vms[index] = vmObj
return
}
this.vms.length = Math.max(this.vms.length, index)
this.vms.splice(index, 1, vmObj)
},
/**
* 取消注册组件实例
* @param {*} vm 组件实例
*/
unregisterVM(type, vm) {
for (let i = this.vms.length - 1; i >= 0; i--) {
if (this.vms[i] === undefined) {
continue
}
if (this.vms[i].type === type && this.vms[i].vm === vm) {
if (i < 4) { // 内置预留vm数
this.vms[i] = undefined
} else {
this.vms.splice(i, 1)
}
break
}
}
}
})
// 冻结处理,需要扩展数据的话,使用crud.updateProp(name, value),以crud.props.name形式访问,这个是响应式的,可以做数据绑定
Object.freeze(crud)
return crud
}
// hook VM
function callVmHook(crud, hook) {
if (crud.debug) {
console.log('callVmHook: ' + hook)
}
const tagHook = crud.tag ? hook + '$' + crud.tag : null
let ret = true
const nargs = [crud]
for (let i = 2; i < arguments.length; ++i) {
nargs.push(arguments[i])
}
// 有些组件扮演了多个角色,调用钩子时,需要去重
const vmSet = new Set()
crud.vms.forEach(vm => vm && vmSet.add(vm.vm))
vmSet.forEach(vm => {
if (vm[hook]) {
ret = vm[hook].apply(vm, nargs) !== false && ret
}
if (tagHook && vm[tagHook]) {
ret = vm[tagHook].apply(vm, nargs) !== false && ret
}
})
return ret
}
function mergeOptions(src, opts) {
const optsRet = {
...src
}
for (const key in src) {
if (opts.hasOwnProperty(key)) {
optsRet[key] = opts[key]
}
}
return optsRet
}
/**
* 查找crud
* @param {*} vm
* @param {string} tag
*/
function lookupCrud(vm, tag) {
tag = tag || vm.$attrs['crud-tag'] || 'default'
// function lookupCrud(vm, tag) {
if (vm.$crud) {
const ret = vm.$crud[tag]
if (ret) {
return ret
}
}
return vm.$parent ? lookupCrud(vm.$parent, tag) : undefined
}
/**
* crud主页
*/
function presenter(crud) {
if (crud) {
console.warn('[CRUD warn]: ' + 'please use $options.cruds() { return CRUD(...) or [CRUD(...), ...] }')
}
return {
data() {
// 在data中返回crud,是为了将crud与当前实例关联,组件观测crud相关属性变化
return {
crud: this.crud
}
},
beforeCreate() {
this.$crud = this.$crud || {}
let cruds = this.$options.cruds instanceof Function ? this.$options.cruds() : crud
if (!(cruds instanceof Array)) {
cruds = [cruds]
}
cruds.forEach(ele => {
if (this.$crud[ele.tag]) {
console.error('[CRUD error]: ' + 'crud with tag [' + ele.tag + ' is already exist')
}
this.$crud[ele.tag] = ele
ele.registerVM('presenter', this, 0)
})
this.crud = this.$crud['defalut'] || cruds[0]
},
methods: {
parseTime
},
created() {
for (const k in this.$crud) {
if (this.$crud[k].queryOnPresenterCreated) {
this.$crud[k].toQuery()
}
}
},
destroyed() {
for (const k in this.$crud) {
this.$crud[k].unregisterVM('presenter', this)
}
},
mounted() {
// 如果table未实例化(例如使用了v-if),请稍后在适当时机crud.attchTable刷新table信息
if (this.$refs.table !== undefined) {
this.crud.attchTable()
}
}
}
}
/**
* 头部
*/
function header() {
return {
data() {
return {
crud: this.crud,
query: this.crud.query
}
},
beforeCreate() {
this.crud = lookupCrud(this)
this.crud.registerVM('header', this, 1)
},
destroyed() {
this.crud.unregisterVM('header', this)
}
}
}
/**
* 分页
*/
function pagination() {
return {
data() {
return {
crud: this.crud,
page: this.crud.page
}
},
beforeCreate() {
this.crud = lookupCrud(this)
this.crud.registerVM('pagination', this, 2)
},
destroyed() {
this.crud.unregisterVM('pagination', this)
}
}
}
/**
* 表单
*/
function form(defaultForm) {
return {
data() {
return {
crud: this.crud,
form: this.crud.form
}
},
beforeCreate() {
this.crud = lookupCrud(this)
this.crud.registerVM('form', this, 3)
},
created() {
this.crud.defaultForm = defaultForm
this.crud.resetForm()
},
destroyed() {
this.crud.unregisterVM('form', this)
}
}
}
/**
* crud
*/
function crud(options = {}) {
const defaultOptions = {
type: undefined
}
options = mergeOptions(defaultOptions, options)
return {
data() {
return {
crud: this.crud
}
},
beforeCreate() {
this.crud = lookupCrud(this)
this.crud.registerVM(options.type, this)
},
destroyed() {
this.crud.unregisterVM(options.type, this)
}
}
}
/**
* CRUD钩子
*/
CRUD.HOOK = {
/** 刷新 - 之前 */
beforeRefresh: 'beforeCrudRefresh',
/** 刷新 - 之后 */
afterRefresh: 'afterCrudRefresh',
/** 删除 - 之前 */
beforeDelete: 'beforeCrudDelete',
/** 删除 - 之后 */
afterDelete: 'afterCrudDelete',
/** 删除取消 - 之前 */
beforeDeleteCancel: 'beforeCrudDeleteCancel',
/** 删除取消 - 之后 */
afterDeleteCancel: 'afterCrudDeleteCancel',
/** 新建 - 之前 */
beforeToAdd: 'beforeCrudToAdd',
/** 新建 - 之后 */
afterToAdd: 'afterCrudToAdd',
/** 编辑 - 之前 */
beforeToEdit: 'beforeCrudToEdit',
/** 编辑 - 之后 */
afterToEdit: 'afterCrudToEdit',
/** 开始 "新建/编辑" - 之前 */
beforeToCU: 'beforeCrudToCU',
/** 开始 "新建/编辑" - 之后 */
afterToCU: 'afterCrudToCU',
/** "新建/编辑" 验证 - 之前 */
beforeValidateCU: 'beforeCrudValidateCU',
/** "新建/编辑" 验证 - 之后 */
afterValidateCU: 'afterCrudValidateCU',
/** 添加取消 - 之前 */
beforeAddCancel: 'beforeCrudAddCancel',
/** 添加取消 - 之后 */
afterAddCancel: 'afterCrudAddCancel',
/** 编辑取消 - 之前 */
beforeEditCancel: 'beforeCrudEditCancel',
/** 编辑取消 - 之后 */
afterEditCancel: 'afterCrudEditCancel',
/** 提交 - 之前 */
beforeSubmit: 'beforeCrudSubmitCU',
/** 提交 - 之后 */
afterSubmit: 'afterCrudSubmitCU',
afterAddError: 'afterCrudAddError',
afterEditError: 'afterCrudEditError'
}
/**
* CRUD状态
*/
CRUD.STATUS = {
NORMAL: 0,
PREPARED: 1,
PROCESSING: 2
}
/**
* CRUD通知类型
*/
CRUD.NOTIFICATION_TYPE = {
SUCCESS: 'success',
WARNING: 'warning',
INFO: 'info',
ERROR: 'error'
}
export default CRUD
export {
presenter,
header,
form,
pagination,
crud
}
......@@ -12,12 +12,24 @@
</div>
<!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="100%" hight="100%">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="130px">
<el-form ref="form" :model="form" :disabled="crud.status.CHECK" :rules="rules" size="small" label-width="130px">
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="证件类型" prop="zjlx">
<el-input v-model="form.zjlx" style="width: 370px" :disabled="true" />
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='01'">
<el-input value ="身份证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='02'">
<el-input value ="军官证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='03'">
<el-input value ="护照" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='04'">
<el-input value ="外国人永久居留证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='99'">
<el-input value ="其他" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -30,8 +42,14 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="状态" prop="status">
<el-input v-model="form.status" type="textarea" style="width: 370px" :disabled="true" />
<el-form-item label="状态" prop="status" v-if="form.status == '0'">
<el-input value="待发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '1'">
<el-input value="已发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '2'">
<el-input value="已接收结果" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -55,84 +73,28 @@
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="证件类型" prop="zjlx">
<el-input v-model="form.zjlx" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple-light">
<el-form-item label="单位地址" prop="xynr">
<el-input v-model="form.dom" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="法人代表姓名" prop="name">
<el-input v-model="form.name" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="统一社会信用代码" prop="uniscid">
<el-input v-model="form.uniscid" style="width: 370px" :disabled="true" />
<el-form-item label="返回报文头日期" prop="receivedate">
<el-input v-model="form.receivedate" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple-light">
<el-form-item label="成立日期" prop="estDate">
<el-input v-model="form.estDate" style="width: 370px" :disabled="true" />
<el-form-item label="返回报文头时间" prop="receivetime">
<el-input v-model="form.receivetime" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="注册资本" prop="name">
<el-input v-model="form.regCap" style="width: 370px" :disabled="true" />
<el-form-item label="返回报文流水号" prop="receiveseqno">
<el-input v-model="form.receiveseqno" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="经营(驻在)期限自" prop="opFrom">
<el-input v-model="form.opFrom" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple-light">
<el-form-item label="经营(驻在)期限至" prop="opto">
<el-input v-model="form.opto" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="登记机关" prop="regOrgCn">
<el-input v-model="form.regOrgCn" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="登记登记状态" prop="regStateCn">
<el-input v-model="form.regStateCn" style="width: 370px" :disabled="true" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="企业经营范围" prop="opScope">
<el-input v-model="form.opScope" type="textarea" style="width: 370px" :disabled="true" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" size="medium" @click="crud.cancelCU">确认</el-button>
......@@ -142,16 +104,16 @@
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%" @selection-change="crud.selectionChangeHandler">
<el-table-column v-if="checkPer(['admin','serverDeploy:edit'])" label="操作" width="150px" align="center">
<template slot-scope="scope">
<udOperation
<Retrieve
:data="scope.row"
:permission="permission"
/>
</template>
</el-table-column>
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column prop="zjlx" label="证件类型" />
<el-table-column prop="zjlx" label="证件类型" :formatter="zjlxFormat"/>
<el-table-column prop="zjhm" label="证件号码" />
<el-table-column prop="status" label="状态" />
<el-table-column prop="status" label="状态" :formatter="statusFormat"/>
<el-table-column prop="xingming" label="姓名" />
<el-table-column prop="crrq" label="插入日期" />
</el-table>
......@@ -163,18 +125,26 @@
<script>
import { testServerConnect } from '@/api/mnt/connect'
import CRUD, { presenter, header, form, crud } from './Crud/crud'
import rrOperation from './Crud/RR.operation'
import pagination from './Crud/Pagination'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
import crudOperation from './Crud/CRUD.operation'
import crudOperation from '@crud/CRUD.operation'
import Retrieve from '@crud/Retrieve'
const defaultForm = { id: null, name: null, ip: null, port: 22, account: 'root', password: null }
export default {
name: 'Xxgxsqsq',
components: { pagination, rrOperation, DateRangePicker, crudOperation },
components: { Retrieve,pagination, rrOperation, DateRangePicker, crudOperation },
cruds() {
return CRUD({ title: '信息共享授权申请', url: 'api/XxgxsqsqController', crudMethod: {}})
return CRUD({ title: '信息共享授权申请', url: 'api/XxgxsqsqController', crudMethod: {}
,optShow: {
add: false,
edit: false,
del: false,
download: false,
reset: true
}})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
......@@ -193,6 +163,37 @@ export default {
}
},
methods: {
/**
* @param row 当前行元素
* @returns {string}
*/
zjlxFormat(row) {
switch (row.zjlx) {
case '01':
return "身份证";
case '02':
return "军官证";
case '03':
return "护照";
case '04':
return "外国人永久居住证";
case '99':
return "其他";
}
},
statusFormat(row) {
switch (row.status) {
case '0':
return "待发送";
case '1':
return "已发送";
case '2':
return "已接收结果";
}
},
testConnectServer() {
this.$refs['form'].validate((valid) => {
if (valid) {
......
<template>
<div class="crud-opts">
<el-button-group class="crud-opts-right">
<el-button
size="mini"
plain
type="info"
icon="el-icon-search"
@click="toggleSearch()"
/>
<el-button
size="mini"
icon="el-icon-refresh"
@click="crud.refresh()"
/>
<el-popover
placement="bottom-end"
width="150"
trigger="click"
>
<el-button
slot="reference"
size="mini"
icon="el-icon-s-grid"
>
<i
class="fa fa-caret-down"
aria-hidden="true"
/>
</el-button>
<el-checkbox
v-model="allColumnsSelected"
:indeterminate="allColumnsSelectedIndeterminate"
@change="handleCheckAllChange"
>
全选
</el-checkbox>
<el-checkbox
v-for="item in tableColumns"
:key="item.property"
v-model="item.visible"
@change="handleCheckedTableColumnsChange(item)"
>
{{ item.label }}
</el-checkbox>
</el-popover>
</el-button-group>
</div>
</template>
<script>
import CRUD, { crud } from '@crud/crud'
function sortWithRef(src, ref) {
const result = Object.assign([], ref)
let cursor = -1
src.forEach(e => {
const idx = result.indexOf(e)
if (idx === -1) {
cursor += 1
result.splice(cursor, 0, e)
} else {
cursor = idx
}
})
return result
}
export default {
mixins: [crud()],
props: {
permission: {
type: Object,
default: () => { return {} }
},
hiddenColumns: {
type: Array,
default: () => { return [] }
},
ignoreColumns: {
type: Array,
default: () => { return [] }
}
},
data() {
return {
tableColumns: [],
allColumnsSelected: true,
allColumnsSelectedIndeterminate: false,
tableUnwatcher: null,
// 忽略下次表格列变动
ignoreNextTableColumnsChange: false
}
},
watch: {
'crud.props.table'() {
this.updateTableColumns()
this.tableColumns.forEach(column => {
if (this.hiddenColumns.indexOf(column.property) !== -1) {
column.visible = false
this.updateColumnVisible(column)
}
})
},
'crud.props.table.store.states.columns'() {
this.updateTableColumns()
}
},
created() {
this.crud.updateProp('searchToggle', true)
},
methods: {
updateTableColumns() {
const table = this.crud.getTable()
if (!table) {
this.tableColumns = []
return
}
let cols = null
const columnFilter = e => e && e.type === 'default' && e.property && this.ignoreColumns.indexOf(e.property) === -1
const refCols = table.columns.filter(columnFilter)
if (this.ignoreNextTableColumnsChange) {
this.ignoreNextTableColumnsChange = false
return
}
this.ignoreNextTableColumnsChange = false
const columns = []
const fullTableColumns = table.$children.map(e => e.columnConfig).filter(columnFilter)
cols = sortWithRef(fullTableColumns, refCols)
cols.forEach(config => {
const column = {
property: config.property,
label: config.label,
visible: refCols.indexOf(config) !== -1
}
columns.push(column)
})
this.tableColumns = columns
},
handleCheckAllChange(val) {
if (val === false) {
this.allColumnsSelected = true
return
}
this.tableColumns.forEach(column => {
if (!column.visible) {
column.visible = true
this.updateColumnVisible(column)
}
})
this.allColumnsSelected = val
this.allColumnsSelectedIndeterminate = false
},
handleCheckedTableColumnsChange(item) {
let totalCount = 0
let selectedCount = 0
this.tableColumns.forEach(column => {
++totalCount
selectedCount += column.visible ? 1 : 0
})
if (selectedCount === 0) {
this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
this.$nextTick(function() {
item.visible = true
})
return
}
this.allColumnsSelected = selectedCount === totalCount
this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
this.updateColumnVisible(item)
},
updateColumnVisible(item) {
const table = this.crud.props.table
const vm = table.$children.find(e => e.prop === item.property)
const columnConfig = vm.columnConfig
if (item.visible) {
// 找出合适的插入点
const columnIndex = this.tableColumns.indexOf(item)
vm.owner.store.commit('insertColumn', columnConfig, columnIndex + 1, null)
} else {
vm.owner.store.commit('removeColumn', columnConfig, null)
}
this.ignoreNextTableColumnsChange = true
},
toggleSearch() {
this.crud.props.searchToggle = !this.crud.props.searchToggle
}
}
}
</script>
<style>
.crud-opts {
padding: 4px 0;
display: -webkit-flex;
display: flex;
align-items: center;
}
.crud-opts .crud-opts-right {
margin-left: auto;
}
.crud-opts .crud-opts-right span {
float: left;
}
</style>
<!--分页-->
<template>
<el-pagination
:page-size.sync="page.size"
:total="page.total"
:current-page.sync="page.page"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="crud.sizeChangeHandler($event)"
@current-change="crud.pageChangeHandler"
/>
</template>
<script>
import { pagination } from '@crud/crud'
export default {
mixins: [pagination()]
}
</script>
<!--搜索与重置-->
<template>
<span>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
<el-button v-if="crud.optShow.reset" class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
</span>
</template>
<script>
import { crud } from '@crud/crud'
export default {
mixins: [crud()],
props: {
itemClass: {
type: String,
required: false,
default: ''
}
}
}
</script>
<template>
<div>
<el-button v-permission="permission.edit" :loading="crud.status.cu === 2" :disabled="disabledEdit" size="mini" type="primary" icon="el-icon-chat-line-square" @click="crud.toEdit(data)">
查看详情
</el-button>
<el-popover v-model="pop" v-permission="permission.del" placement="top" width="180" trigger="manual" @show="onPopoverShow" @hide="onPopoverHide">
<p>{{ msg }}</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="doCancel">取消</el-button>
<el-button :loading="crud.dataStatus[crud.getDataId(data)].delete === 2" type="primary" size="mini" @click="crud.doDelete(data)">确定</el-button>
</div>
<!-- 删除按钮,此页面只需要查询,所以注释-->
<!-- <el-button slot="reference" :disabled="disabledDle" type="danger" icon="el-icon-delete" size="mini" @click="toDelete" />-->
</el-popover>
</div>
</template>
<script>
import CRUD, { crud } from '@crud/crud'
export default {
mixins: [crud()],
props: {
data: {
type: Object,
required: true
},
permission: {
type: Object,
required: true
},
disabledEdit: {
type: Boolean,
default: false
},
disabledDle: {
type: Boolean,
default: false
},
msg: {
type: String,
default: '确定删除本条数据吗?'
}
},
data() {
return {
pop: false
}
},
methods: {
doCancel() {
this.pop = false
this.crud.cancelDelete(this.data)
},
toDelete() {
this.pop = true
},
[CRUD.HOOK.afterDelete](crud, data) {
if (data === this.data) {
this.pop = false
}
},
onPopoverShow() {
setTimeout(() => {
document.addEventListener('click', this.handleDocumentClick)
}, 0)
},
onPopoverHide() {
document.removeEventListener('click', this.handleDocumentClick)
},
handleDocumentClick(event) {
this.pop = false
}
}
}
</script>
import { initData, download } from '@/api/data'
import { parseTime, downloadFile } from '@/utils/index'
import Vue from 'vue'
/**
* CRUD配置
* @author moxun
* @param {*} options <br>
* @return crud instance.
* @example
* 要使用多crud时,请在关联crud的组件处使用crud-tag进行标记,如:<jobForm :job-status="dict.job_status" crud-tag="job" />
*/
function CRUD(options) {
const defaultOptions = {
tag: 'default',
// id字段名
idField: 'id',
// 标题
title: '',
// 请求数据的url
url: '',
// 表格数据
data: [],
// 选择项
selections: [],
// 待查询的对象
query: {},
// 查询数据的参数
params: {},
// Form 表单
form: {},
// 重置表单
defaultForm: () => {},
// 排序规则,默认 id 降序, 支持多字段排序 ['id,desc', 'createTime,asc']
sort: ['id,desc'],
// 等待时间
time: 50,
// CRUD Method
crudMethod: {
add: (form) => {},
del: (id) => {},
edit: (form) => {},
get: (id) => {}
},
// 主页操作栏显示哪些按钮
optShow: {
add: true,
edit: true,
del: true,
download: true,
reset: true
},
// 自定义一些扩展属性
props: {},
// 在主页准备
queryOnPresenterCreated: true,
// 调试开关
debug: false
}
options = mergeOptions(defaultOptions, options)
const data = {
...options,
// 记录数据状态
dataStatus: {},
status: {
add: CRUD.STATUS.NORMAL,
edit: CRUD.STATUS.NORMAL,
// 添加或编辑状态
get cu() {
if (this.add === CRUD.STATUS.NORMAL && this.edit === CRUD.STATUS.NORMAL) {
return CRUD.STATUS.NORMAL
} else if (this.add === CRUD.STATUS.PREPARED || this.edit === CRUD.STATUS.PREPARED) {
return CRUD.STATUS.PREPARED
} else if (this.add === CRUD.STATUS.PROCESSING || this.edit === CRUD.STATUS.PROCESSING) {
return CRUD.STATUS.PROCESSING
}
throw new Error('wrong crud\'s cu status')
},
// 标题
get title() {
return this.add > CRUD.STATUS.NORMAL ? `新增${crud.title}` : this.edit > CRUD.STATUS.NORMAL ? `${crud.title}` : crud.title
}
},
msg: {
submit: '提交成功',
add: '新增成功',
edit: '编辑成功',
del: '删除成功'
},
page: {
// 页码
page: 0,
// 每页数据条数
size: 10,
// 总数据条数
total: 0
},
// 整体loading
loading: false,
// 导出的 Loading
downloadLoading: false,
// 删除的 Loading
delAllLoading: false
}
const methods = {
/**
* 通用的提示
*/
submitSuccessNotify() {
crud.notify(crud.msg.submit, CRUD.NOTIFICATION_TYPE.SUCCESS)
},
addSuccessNotify() {
crud.notify(crud.msg.add, CRUD.NOTIFICATION_TYPE.SUCCESS)
},
editSuccessNotify() {
crud.notify(crud.msg.edit, CRUD.NOTIFICATION_TYPE.SUCCESS)
},
delSuccessNotify() {
crud.notify(crud.msg.del, CRUD.NOTIFICATION_TYPE.SUCCESS)
},
// 搜索
toQuery() {
crud.page.page = 1
crud.refresh()
},
// 刷新
refresh() {
if (!callVmHook(crud, CRUD.HOOK.beforeRefresh)) {
return
}
return new Promise((resolve, reject) => {
crud.loading = true
// 请求数据
initData(crud.url, crud.getQueryParams()).then(data => {
const table = crud.getTable()
if (table && table.lazy) { // 懒加载子节点数据,清掉已加载的数据
table.store.states.treeData = {}
table.store.states.lazyTreeNodeMap = {}
}
crud.page.total = data.totalElements
crud.data = data.content
crud.resetDataStatus()
// time 毫秒后显示表格
setTimeout(() => {
crud.loading = false
callVmHook(crud, CRUD.HOOK.afterRefresh)
}, crud.time)
resolve(data)
}).catch(err => {
crud.loading = false
reject(err)
})
})
},
/**
* 启动添加
*/
toAdd() {
crud.resetForm()
if (!(callVmHook(crud, CRUD.HOOK.beforeToAdd, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
return
}
crud.status.add = CRUD.STATUS.PREPARED
callVmHook(crud, CRUD.HOOK.afterToAdd, crud.form)
callVmHook(crud, CRUD.HOOK.afterToCU, crud.form)
},
/**
* 启动编辑
* @param {*} data 数据项
*/
toEdit(data) {
crud.resetForm(JSON.parse(JSON.stringify(data)))
if (!(callVmHook(crud, CRUD.HOOK.beforeToEdit, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
return
}
crud.status.edit = CRUD.STATUS.PREPARED
crud.getDataStatus(crud.getDataId(data)).edit = CRUD.STATUS.PREPARED
callVmHook(crud, CRUD.HOOK.afterToEdit, crud.form)
callVmHook(crud, CRUD.HOOK.afterToCU, crud.form)
},
/**
* 启动删除
* @param {*} data 数据项
*/
toDelete(data) {
crud.getDataStatus(crud.getDataId(data)).delete = CRUD.STATUS.PREPARED
},
/**
* 取消删除
* @param {*} data 数据项
*/
cancelDelete(data) {
if (!callVmHook(crud, CRUD.HOOK.beforeDeleteCancel, data)) {
return
}
crud.getDataStatus(crud.getDataId(data)).delete = CRUD.STATUS.NORMAL
callVmHook(crud, CRUD.HOOK.afterDeleteCancel, data)
},
/**
* 取消新增/编辑
*/
cancelCU() {
const addStatus = crud.status.add
const editStatus = crud.status.edit
if (addStatus === CRUD.STATUS.PREPARED) {
if (!callVmHook(crud, CRUD.HOOK.beforeAddCancel, crud.form)) {
return
}
crud.status.add = CRUD.STATUS.NORMAL
}
if (editStatus === CRUD.STATUS.PREPARED) {
if (!callVmHook(crud, CRUD.HOOK.beforeEditCancel, crud.form)) {
return
}
crud.status.edit = CRUD.STATUS.NORMAL
crud.getDataStatus(crud.getDataId(crud.form)).edit = CRUD.STATUS.NORMAL
}
crud.resetForm()
if (addStatus === CRUD.STATUS.PREPARED) {
callVmHook(crud, CRUD.HOOK.afterAddCancel, crud.form)
}
if (editStatus === CRUD.STATUS.PREPARED) {
callVmHook(crud, CRUD.HOOK.afterEditCancel, crud.form)
}
// 清除表单验证
if (crud.findVM('form').$refs['form']) {
crud.findVM('form').$refs['form'].clearValidate()
}
},
/**
* 提交新增/编辑
*/
submitCU() {
if (!callVmHook(crud, CRUD.HOOK.beforeValidateCU)) {
return
}
crud.findVM('form').$refs['form'].validate(valid => {
if (!valid) {
return
}
if (!callVmHook(crud, CRUD.HOOK.afterValidateCU)) {
return
}
if (crud.status.add === CRUD.STATUS.PREPARED) {
crud.doAdd()
} else if (crud.status.edit === CRUD.STATUS.PREPARED) {
crud.doEdit()
}
})
},
/**
* 执行添加
*/
doAdd() {
if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) {
return
}
crud.status.add = CRUD.STATUS.PROCESSING
crud.crudMethod.add(crud.form).then(() => {
crud.status.add = CRUD.STATUS.NORMAL
crud.resetForm()
crud.addSuccessNotify()
callVmHook(crud, CRUD.HOOK.afterSubmit)
crud.toQuery()
}).catch(() => {
crud.status.add = CRUD.STATUS.PREPARED
callVmHook(crud, CRUD.HOOK.afterAddError)
})
},
/**
* 执行编辑
*/
doEdit() {
if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) {
return
}
crud.status.edit = CRUD.STATUS.PROCESSING
crud.crudMethod.edit(crud.form).then(() => {
crud.status.edit = CRUD.STATUS.NORMAL
crud.getDataStatus(crud.getDataId(crud.form)).edit = CRUD.STATUS.NORMAL
crud.editSuccessNotify()
crud.resetForm()
callVmHook(crud, CRUD.HOOK.afterSubmit)
crud.refresh()
}).catch(() => {
crud.status.edit = CRUD.STATUS.PREPARED
callVmHook(crud, CRUD.HOOK.afterEditError)
})
},
/**
* 执行删除
* @param {*} data 数据项
*/
doDelete(data) {
let delAll = false
let dataStatus
const ids = []
if (data instanceof Array) {
delAll = true
data.forEach(val => {
ids.push(this.getDataId(val))
})
} else {
ids.push(this.getDataId(data))
dataStatus = crud.getDataStatus(this.getDataId(data))
}
if (!callVmHook(crud, CRUD.HOOK.beforeDelete, data)) {
return
}
if (!delAll) {
dataStatus.delete = CRUD.STATUS.PROCESSING
}
return crud.crudMethod.del(ids).then(() => {
if (delAll) {
crud.delAllLoading = false
} else dataStatus.delete = CRUD.STATUS.PREPARED
crud.dleChangePage(1)
crud.delSuccessNotify()
callVmHook(crud, CRUD.HOOK.afterDelete, data)
crud.refresh()
}).catch(() => {
if (delAll) {
crud.delAllLoading = false
} else dataStatus.delete = CRUD.STATUS.PREPARED
})
},
/**
* 通用导出
*/
doExport() {
crud.downloadLoading = true
download(crud.url + '/download', crud.getQueryParams()).then(result => {
downloadFile(result, crud.title + '数据', 'xlsx')
crud.downloadLoading = false
}).catch(() => {
crud.downloadLoading = false
})
},
/**
* 获取查询参数
*/
getQueryParams: function() {
// 清除参数无值的情况
Object.keys(crud.query).length !== 0 && Object.keys(crud.query).forEach(item => {
if (crud.query[item] === null || crud.query[item] === '') crud.query[item] = undefined
})
Object.keys(crud.params).length !== 0 && Object.keys(crud.params).forEach(item => {
if (crud.params[item] === null || crud.params[item] === '') crud.params[item] = undefined
})
return {
page: crud.page.page - 1,
size: crud.page.size,
sort: crud.sort,
...crud.query,
...crud.params
}
},
// 当前页改变
pageChangeHandler(e) {
crud.page.page = e
crud.refresh()
},
// 每页条数改变
sizeChangeHandler(e) {
crud.page.size = e
crud.page.page = 1
crud.refresh()
},
// 预防删除第二页最后一条数据时,或者多选删除第二页的数据时,页码错误导致请求无数据
dleChangePage(size) {
if (crud.data.length === size && crud.page.page !== 1) {
crud.page.page -= 1
}
},
// 选择改变
selectionChangeHandler(val) {
crud.selections = val
},
/**
* 重置查询参数
* @param {Boolean} toQuery 重置后进行查询操作
*/
resetQuery(toQuery = true) {
const defaultQuery = JSON.parse(JSON.stringify(crud.defaultQuery))
const query = crud.query
Object.keys(query).forEach(key => {
query[key] = defaultQuery[key]
})
// 重置参数
this.params = {}
if (toQuery) {
crud.toQuery()
}
},
/**
* 重置表单
* @param {Array} data 数据
*/
resetForm(data) {
const form = data || (typeof crud.defaultForm === 'object' ? JSON.parse(JSON.stringify(crud.defaultForm)) : crud.defaultForm.apply(crud.findVM('form')))
const crudFrom = crud.form
for (const key in form) {
if (crudFrom.hasOwnProperty(key)) {
crudFrom[key] = form[key]
} else {
Vue.set(crudFrom, key, form[key])
}
}
// add by ghl 2020-10-04 页面重复添加信息时,下拉框的校验会存在,需要找工取消
if (crud.findVM('form').$refs['form']) {
crud.findVM('form').$refs['form'].clearValidate()
}
},
/**
* 重置数据状态
*/
resetDataStatus() {
const dataStatus = {}
function resetStatus(datas) {
datas.forEach(e => {
dataStatus[crud.getDataId(e)] = {
delete: 0,
edit: 0
}
if (e.children) {
resetStatus(e.children)
}
})
}
resetStatus(crud.data)
crud.dataStatus = dataStatus
},
/**
* 获取数据状态
* @param {Number | String} id 数据项id
*/
getDataStatus(id) {
return crud.dataStatus[id]
},
/**
* 用于树形表格多选, 选中所有
* @param selection
*/
selectAllChange(selection) {
// 如果选中的数目与请求到的数目相同就选中子节点,否则就清空选中
if (selection && selection.length === crud.data.length) {
selection.forEach(val => {
crud.selectChange(selection, val)
})
} else {
crud.getTable().clearSelection()
}
},
/**
* 用于树形表格多选,单选的封装
* @param selection
* @param row
*/
selectChange(selection, row) {
// 如果selection中存在row代表是选中,否则是取消选中
if (selection.find(val => { return crud.getDataId(val) === crud.getDataId(row) })) {
if (row.children) {
row.children.forEach(val => {
crud.getTable().toggleRowSelection(val, true)
selection.push(val)
if (val.children) {
crud.selectChange(selection, val)
}
})
}
} else {
crud.toggleRowSelection(selection, row)
}
},
/**
* 切换选中状态
* @param selection
* @param data
*/
toggleRowSelection(selection, data) {
if (data.children) {
data.children.forEach(val => {
crud.getTable().toggleRowSelection(val, false)
if (val.children) {
crud.toggleRowSelection(selection, val)
}
})
}
},
findVM(type) {
return crud.vms.find(vm => vm && vm.type === type).vm
},
notify(title, type = CRUD.NOTIFICATION_TYPE.INFO) {
crud.vms[0].vm.$notify({
title,
type,
duration: 2500
})
},
updateProp(name, value) {
Vue.set(crud.props, name, value)
},
getDataId(data) {
return data[this.idField]
},
getTable() {
return this.findVM('presenter').$refs.table
},
attchTable() {
const table = this.getTable()
this.updateProp('table', table)
const that = this
table.$on('expand-change', (row, expanded) => {
if (!expanded) {
return
}
const lazyTreeNodeMap = table.store.states.lazyTreeNodeMap
row.children = lazyTreeNodeMap[crud.getDataId(row)]
if (row.children) {
row.children.forEach(ele => {
const id = crud.getDataId(ele)
if (that.dataStatus[id] === undefined) {
that.dataStatus[id] = {
delete: 0,
edit: 0
}
}
})
}
})
}
}
const crud = Object.assign({}, data)
// 可观测化
Vue.observable(crud)
// 附加方法
Object.assign(crud, methods)
// 记录初始默认的查询参数,后续重置查询时使用
Object.assign(crud, {
defaultQuery: JSON.parse(JSON.stringify(data.query)),
// 预留4位存储:组件 主页、头部、分页、表单,调试查看也方便找
vms: Array(4),
/**
* 注册组件实例
* @param {String} type 类型
* @param {*} vm 组件实例
* @param {Number} index 该参数内部使用
*/
registerVM(type, vm, index = -1) {
const vmObj = {
type,
vm: vm
}
if (index < 0) {
this.vms.push(vmObj)
return
}
if (index < 4) { // 内置预留vm数
this.vms[index] = vmObj
return
}
this.vms.length = Math.max(this.vms.length, index)
this.vms.splice(index, 1, vmObj)
},
/**
* 取消注册组件实例
* @param {*} vm 组件实例
*/
unregisterVM(type, vm) {
for (let i = this.vms.length - 1; i >= 0; i--) {
if (this.vms[i] === undefined) {
continue
}
if (this.vms[i].type === type && this.vms[i].vm === vm) {
if (i < 4) { // 内置预留vm数
this.vms[i] = undefined
} else {
this.vms.splice(i, 1)
}
break
}
}
}
})
// 冻结处理,需要扩展数据的话,使用crud.updateProp(name, value),以crud.props.name形式访问,这个是响应式的,可以做数据绑定
Object.freeze(crud)
return crud
}
// hook VM
function callVmHook(crud, hook) {
if (crud.debug) {
console.log('callVmHook: ' + hook)
}
const tagHook = crud.tag ? hook + '$' + crud.tag : null
let ret = true
const nargs = [crud]
for (let i = 2; i < arguments.length; ++i) {
nargs.push(arguments[i])
}
// 有些组件扮演了多个角色,调用钩子时,需要去重
const vmSet = new Set()
crud.vms.forEach(vm => vm && vmSet.add(vm.vm))
vmSet.forEach(vm => {
if (vm[hook]) {
ret = vm[hook].apply(vm, nargs) !== false && ret
}
if (tagHook && vm[tagHook]) {
ret = vm[tagHook].apply(vm, nargs) !== false && ret
}
})
return ret
}
function mergeOptions(src, opts) {
const optsRet = {
...src
}
for (const key in src) {
if (opts.hasOwnProperty(key)) {
optsRet[key] = opts[key]
}
}
return optsRet
}
/**
* 查找crud
* @param {*} vm
* @param {string} tag
*/
function lookupCrud(vm, tag) {
tag = tag || vm.$attrs['crud-tag'] || 'default'
// function lookupCrud(vm, tag) {
if (vm.$crud) {
const ret = vm.$crud[tag]
if (ret) {
return ret
}
}
return vm.$parent ? lookupCrud(vm.$parent, tag) : undefined
}
/**
* crud主页
*/
function presenter(crud) {
if (crud) {
console.warn('[CRUD warn]: ' + 'please use $options.cruds() { return CRUD(...) or [CRUD(...), ...] }')
}
return {
data() {
// 在data中返回crud,是为了将crud与当前实例关联,组件观测crud相关属性变化
return {
crud: this.crud
}
},
beforeCreate() {
this.$crud = this.$crud || {}
let cruds = this.$options.cruds instanceof Function ? this.$options.cruds() : crud
if (!(cruds instanceof Array)) {
cruds = [cruds]
}
cruds.forEach(ele => {
if (this.$crud[ele.tag]) {
console.error('[CRUD error]: ' + 'crud with tag [' + ele.tag + ' is already exist')
}
this.$crud[ele.tag] = ele
ele.registerVM('presenter', this, 0)
})
this.crud = this.$crud['defalut'] || cruds[0]
},
methods: {
parseTime
},
created() {
for (const k in this.$crud) {
if (this.$crud[k].queryOnPresenterCreated) {
this.$crud[k].toQuery()
}
}
},
destroyed() {
for (const k in this.$crud) {
this.$crud[k].unregisterVM('presenter', this)
}
},
mounted() {
// 如果table未实例化(例如使用了v-if),请稍后在适当时机crud.attchTable刷新table信息
if (this.$refs.table !== undefined) {
this.crud.attchTable()
}
}
}
}
/**
* 头部
*/
function header() {
return {
data() {
return {
crud: this.crud,
query: this.crud.query
}
},
beforeCreate() {
this.crud = lookupCrud(this)
this.crud.registerVM('header', this, 1)
},
destroyed() {
this.crud.unregisterVM('header', this)
}
}
}
/**
* 分页
*/
function pagination() {
return {
data() {
return {
crud: this.crud,
page: this.crud.page
}
},
beforeCreate() {
this.crud = lookupCrud(this)
this.crud.registerVM('pagination', this, 2)
},
destroyed() {
this.crud.unregisterVM('pagination', this)
}
}
}
/**
* 表单
*/
function form(defaultForm) {
return {
data() {
return {
crud: this.crud,
form: this.crud.form
}
},
beforeCreate() {
this.crud = lookupCrud(this)
this.crud.registerVM('form', this, 3)
},
created() {
this.crud.defaultForm = defaultForm
this.crud.resetForm()
},
destroyed() {
this.crud.unregisterVM('form', this)
}
}
}
/**
* crud
*/
function crud(options = {}) {
const defaultOptions = {
type: undefined
}
options = mergeOptions(defaultOptions, options)
return {
data() {
return {
crud: this.crud
}
},
beforeCreate() {
this.crud = lookupCrud(this)
this.crud.registerVM(options.type, this)
},
destroyed() {
this.crud.unregisterVM(options.type, this)
}
}
}
/**
* CRUD钩子
*/
CRUD.HOOK = {
/** 刷新 - 之前 */
beforeRefresh: 'beforeCrudRefresh',
/** 刷新 - 之后 */
afterRefresh: 'afterCrudRefresh',
/** 删除 - 之前 */
beforeDelete: 'beforeCrudDelete',
/** 删除 - 之后 */
afterDelete: 'afterCrudDelete',
/** 删除取消 - 之前 */
beforeDeleteCancel: 'beforeCrudDeleteCancel',
/** 删除取消 - 之后 */
afterDeleteCancel: 'afterCrudDeleteCancel',
/** 新建 - 之前 */
beforeToAdd: 'beforeCrudToAdd',
/** 新建 - 之后 */
afterToAdd: 'afterCrudToAdd',
/** 编辑 - 之前 */
beforeToEdit: 'beforeCrudToEdit',
/** 编辑 - 之后 */
afterToEdit: 'afterCrudToEdit',
/** 开始 "新建/编辑" - 之前 */
beforeToCU: 'beforeCrudToCU',
/** 开始 "新建/编辑" - 之后 */
afterToCU: 'afterCrudToCU',
/** "新建/编辑" 验证 - 之前 */
beforeValidateCU: 'beforeCrudValidateCU',
/** "新建/编辑" 验证 - 之后 */
afterValidateCU: 'afterCrudValidateCU',
/** 添加取消 - 之前 */
beforeAddCancel: 'beforeCrudAddCancel',
/** 添加取消 - 之后 */
afterAddCancel: 'afterCrudAddCancel',
/** 编辑取消 - 之前 */
beforeEditCancel: 'beforeCrudEditCancel',
/** 编辑取消 - 之后 */
afterEditCancel: 'afterCrudEditCancel',
/** 提交 - 之前 */
beforeSubmit: 'beforeCrudSubmitCU',
/** 提交 - 之后 */
afterSubmit: 'afterCrudSubmitCU',
afterAddError: 'afterCrudAddError',
afterEditError: 'afterCrudEditError'
}
/**
* CRUD状态
*/
CRUD.STATUS = {
NORMAL: 0,
PREPARED: 1,
PROCESSING: 2
}
/**
* CRUD通知类型
*/
CRUD.NOTIFICATION_TYPE = {
SUCCESS: 'success',
WARNING: 'warning',
INFO: 'info',
ERROR: 'error'
}
export default CRUD
export {
presenter,
header,
form,
pagination,
crud
}
......@@ -12,12 +12,24 @@
</div>
<!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="100%" hight="100%">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="130px">
<el-form ref="form" :model="form" :disabled="crud.status.CHECK" :rules="rules" size="small" label-width="130px">
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="证件类型" prop="zjlx">
<el-input v-model="form.zjlx" style="width: 370px" :disabled="true" />
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='01'">
<el-input value ="身份证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='02'">
<el-input value ="军官证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='03'">
<el-input value ="护照" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='04'">
<el-input value ="外国人永久居留证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='99'">
<el-input value ="其他" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -30,8 +42,14 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="状态" prop="status">
<el-input v-model="form.status" type="textarea" style="width: 370px" :disabled="true" />
<el-form-item label="状态" prop="status" v-if="form.status == '0'">
<el-input value="待发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '1'">
<el-input value="已发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '2'">
<el-input value="已接收结果" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -55,84 +73,26 @@
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="证件类型" prop="zjlx">
<el-input v-model="form.zjlx" style="width: 370px" :disabled="true" />
<el-form-item label="返回报文头日期" prop="receivedate">
<el-input v-model="form.receivedate" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple-light">
<el-form-item label="单位地址" prop="xynr">
<el-input v-model="form.dom" style="width: 370px" :disabled="true" />
<el-form-item label="返回报文头时间" prop="receivetime">
<el-input v-model="form.receivetime" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="法人代表姓名" prop="name">
<el-input v-model="form.name" style="width: 370px" :disabled="true" />
<el-form-item label="返回报文流水号" prop="receiveseqno">
<el-input v-model="form.receiveseqno" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="统一社会信用代码" prop="uniscid">
<el-input v-model="form.uniscid" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple-light">
<el-form-item label="成立日期" prop="estDate">
<el-input v-model="form.estDate" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="注册资本" prop="name">
<el-input v-model="form.regCap" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="经营(驻在)期限自" prop="opFrom">
<el-input v-model="form.opFrom" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple-light">
<el-form-item label="经营(驻在)期限至" prop="opto">
<el-input v-model="form.opto" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="登记机关" prop="regOrgCn">
<el-input v-model="form.regOrgCn" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="登记登记状态" prop="regStateCn">
<el-input v-model="form.regStateCn" style="width: 370px" :disabled="true" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="企业经营范围" prop="opScope">
<el-input v-model="form.opScope" type="textarea" style="width: 370px" :disabled="true" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" size="medium" @click="crud.cancelCU">确认</el-button>
......@@ -142,16 +102,16 @@
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%" @selection-change="crud.selectionChangeHandler">
<el-table-column v-if="checkPer(['admin','serverDeploy:edit'])" label="操作" width="150px" align="center">
<template slot-scope="scope">
<udOperation
<Retrieve
:data="scope.row"
:permission="permission"
/>
</template>
</el-table-column>
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column prop="zjlx" label="证件类型" />
<el-table-column prop="zjlx" label="证件类型" :formatter="zjlxFormat"/>
<el-table-column prop="zjhm" label="证件号码" />
<el-table-column prop="status" label="状态" />
<el-table-column prop="status" label="状态" :formatter="statusFormat"/>
<el-table-column prop="xingming" label="姓名" />
<el-table-column prop="crrq" label="插入日期" />
</el-table>
......@@ -163,19 +123,25 @@
<script>
import { testServerConnect } from '@/api/mnt/connect'
import CRUD, { presenter, header, form, crud } from './Crud/crud'
import rrOperation from './Crud/RR.operation'
import udOperation from './Crud/UD.operation'
import pagination from './Crud/Pagination'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
import crudOperation from './Crud/CRUD.operation'
import crudOperation from '@crud/CRUD.operation'
import Retrieve from '@crud/Retrieve'
const defaultForm = { id: null, name: null, ip: null, port: 22, account: 'root', password: null }
export default {
name: 'Xxgxsqyz',
components: { pagination, rrOperation, udOperation, DateRangePicker, crudOperation },
components: { Retrieve,pagination, rrOperation,DateRangePicker, crudOperation },
cruds() {
return CRUD({ title: '信息共享授权验证', url: 'api/XxgxsqyzController', crudMethod: {}})
return CRUD({ title: '信息共享授权验证', url: 'api/XxgxsqyzController', crudMethod: {},optShow: {
add: false,
edit: false,
del: false,
download: false,
reset: true
}})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
......@@ -194,6 +160,37 @@ export default {
}
},
methods: {
/**
* @param row 当前行元素
* @returns {string}
*/
zjlxFormat(row) {
switch (row.zjlx) {
case '01':
return "身份证";
case '02':
return "军官证";
case '03':
return "护照";
case '04':
return "外国人永久居住证";
case '99':
return "其他";
}
},
statusFormat(row) {
switch (row.status) {
case '0':
return "待发送";
case '1':
return "已发送";
case '2':
return "已接收结果";
}
},
testConnectServer() {
this.$refs['form'].validate((valid) => {
if (valid) {
......
......@@ -12,12 +12,24 @@
</div>
<!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="100%" hight="100%">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="130px">
<el-form ref="form" :model="form" :disabled="crud.status.CHECK" :rules="rules" size="small" label-width="130px">
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="证件类型" prop="zjlx">
<el-input v-model="form.zjlx" style="width: 370px" :disabled="true" />
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='01'">
<el-input value ="身份证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='02'">
<el-input value ="军官证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='03'">
<el-input value ="护照" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='04'">
<el-input value ="外国人永久居留证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='99'">
<el-input value ="其他" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -30,8 +42,14 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="状态" prop="status">
<el-input v-model="form.status" type="textarea" style="width: 370px" :disabled="true" />
<el-form-item label="状态" prop="status" v-if="form.status == '0'">
<el-input value="待发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '1'">
<el-input value="已发送" style="width: 370px" />
</el-form-item>
<el-form-item label="状态" prop="status" v-if="form.status == '2'">
<el-input value="已接收结果" style="width: 370px" />
</el-form-item>
</div>
</el-col>
......@@ -92,8 +110,23 @@
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-form-item label="业务类型" prop="YWLX">
<el-input v-model="form.YWLX" style="width: 370px" :disabled="true" />
<el-form-item label="业务类型" prop="YWLX" v-if="form.YWLX == '01'">
<el-input value="缴存" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="业务类型" prop="YWLX" v-if="form.YWLX == '02'">
<el-input value="提取" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="业务类型" prop="YWLX" v-if="form.YWLX == '03'">
<el-input value="贷款" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="业务类型" prop="YWLX" v-if="form.YWLX == '04'">
<el-input value="开户" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="业务类型" prop="YWLX" v-if="form.YWLX == '05'">
<el-input value="销户" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="业务类型" prop="YWLX" v-if="form.YWLX == '99'">
<el-input value="其他" style="width: 370px" :disabled="true" />
</el-form-item>
</div>
</el-col>
......@@ -105,8 +138,26 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="授权状态" prop="SQZT">
<el-input v-model="form.SQZT" type="textarea" style="width: 370px" :disabled="true" />
<el-form-item label="授权状态" prop="SQZT" v-if="form.SQZT == '00'">
<el-input value="中心提交授权申请,待客户确认" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="授权状态" prop="SQZT" v-if="form.SQZT == '01'">
<el-input value="客户已确认授权,业务待办理" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="授权状态" prop="SQZT" v-if="form.SQZT == '02'">
<el-input value="客户拒绝授权" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="授权状态" prop="SQZT" v-if="form.SQZT == '03'">
<el-input value="客户已主动授权,业务待办理" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="授权状态" prop="SQZT" v-if="form.SQZT == '04'">
<el-input value="客户取消授权申请" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="授权状态" prop="SQZT" v-if="form.SQZT == '05'">
<el-input value="业务已办理-授权失效" style="width: 370px" :disabled="true" />
</el-form-item>
<el-form-item label="授权状态" prop="SQZT" v-if="form.SQZT == '06'">
<el-input value="授权已过期-授权失效" style="width: 370px" :disabled="true" />
</el-form-item>
</el-col>
<el-col :span="8">
......@@ -118,13 +169,27 @@
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="授权办理日期" prop="SQBLRQ">
<el-input v-model="form.SQBLRQ" type="textarea" style="width: 370px" :disabled="true" />
<el-input v-model="form.SQBLRQ" style="width: 370px" :disabled="true" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="证件类型" prop="ZJLX">
<el-input v-model="form.ZJLX" style="width: 370px" :disabled="true" />
</el-form-item>
<div class="grid-content bg-purple">
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='01'">
<el-input value ="身份证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='02'">
<el-input value ="军官证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='03'">
<el-input value ="护照" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='04'">
<el-input value ="外国人永久居留证" style="width: 370px" />
</el-form-item>
<el-form-item label="证件类型" prop="zjlx" v-if="form.zjlx =='99'">
<el-input value ="其他" style="width: 370px" />
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
......@@ -144,9 +209,9 @@
</template>
</el-table-column>
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column prop="zjlx" label="证件类型" />
<el-table-column prop="zjlx" label="证件类型" :formatter="zjlxFormat" />
<el-table-column prop="zjhm" label="证件号码" />
<el-table-column prop="status" label="状态" />
<el-table-column prop="status" label="状态" :formatter="statusFormat"/>
<el-table-column prop="xingming" label="姓名" />
<el-table-column prop="crrq" label="插入日期" />
</el-table>
......@@ -170,7 +235,13 @@ export default {
name: 'Xxsysqlb',
components: { Retrieve, pagination, rrOperation, DateRangePicker, crudOperation },
cruds() {
return CRUD({ title: '信息使用授权列表', url: 'api/XxsysqlbController', crudMethod: {}})
return CRUD({ title: '信息使用授权列表', url: 'api/XxsysqlbController', crudMethod: {},optShow: {
add: false,
edit: false,
del: false,
download: false,
reset: true
}})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
......@@ -193,6 +264,36 @@ export default {
}
},
methods: {
/**
* @param row 当前行元素
* @returns {string}
*/
zjlxFormat(row) {
switch (row.zjlx) {
case '01':
return "身份证";
case '02':
return "军官证";
case '03':
return "护照";
case '04':
return "外国人永久居住证";
case '99':
return "其他";
}
},
statusFormat(row) {
switch (row.status) {
case '0':
return "待发送";
case '1':
return "已发送";
case '2':
return "已接收结果";
}
},
testConnectServer() {
this.$refs['form'].validate((valid) => {
if (valid) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment