|
@@ -0,0 +1,491 @@
|
|
|
+<template>
|
|
|
+ <div class="my-container">
|
|
|
+ <div class="bill-left">
|
|
|
+ <div class="bill-tab">
|
|
|
+ <div class="tab-title">导航</div>
|
|
|
+ <side-tree :propConfig="treeConfig" @onChange="onChangeTree" ref="sideTree" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bill-main">
|
|
|
+ <module-view :propConfig="config" ref="moduleView" @pagination="getDataList" @search="getDataList"
|
|
|
+ @resert="getDataList" @clickHandle="clickHandle" @detail="openEdit" @onRefresh="onRefresh">
|
|
|
+ </module-view>
|
|
|
+ </div>
|
|
|
+ <!-- 新增/编辑弹窗 -->
|
|
|
+ <el-dialog :title="popTitle+'供应商'" :visible.sync="dialogFormVisible" width="30%">
|
|
|
+ <by-form :propConfig="addConfig" ref="addFormId">
|
|
|
+ <template v-slot:status class="clearfix">
|
|
|
+ <el-radio class="fl" style="margin-top: 8px;" v-model="radio" :label="1">正常</el-radio>
|
|
|
+ <el-radio class="fl" style="margin-top: 8px;" v-model="radio" :label="2">禁用</el-radio>
|
|
|
+ </template>
|
|
|
+ </by-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="confirm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+ import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
|
|
+ import api from "@/api/currency";
|
|
|
+ import Assembly from "@/components/Assembly/material.vue";
|
|
|
+ @Component
|
|
|
+ export default class Supplier extends Vue {
|
|
|
+ baseURL : any = process.env.VUE_APP_BASE_API
|
|
|
+ loading : any = null
|
|
|
+ timeNum = 0;
|
|
|
+ timer : any = null
|
|
|
+ popTitle : any = ''
|
|
|
+ radio : any = 1
|
|
|
+ dialogFormVisible : boolean = false
|
|
|
+ parentId: any = '';
|
|
|
+ treeConfig = {
|
|
|
+ attr: {
|
|
|
+ retConfig: {
|
|
|
+ id: 'id',
|
|
|
+ name: 'name'
|
|
|
+ },
|
|
|
+ defaultExpandAll: true,
|
|
|
+ label: 'name',
|
|
|
+ resType: 'data'
|
|
|
+ },
|
|
|
+ request: {
|
|
|
+ url: '/maindata/maindataOrganizationCategory/treeList',
|
|
|
+ method: 'GET'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ config : any = {
|
|
|
+ search: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini'
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ [{
|
|
|
+ span: 6,
|
|
|
+ label: '名称',
|
|
|
+ prop: 'name',
|
|
|
+ component: 'by-input',
|
|
|
+ labelWidth: '70px',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ placeholder: '请输入名称',
|
|
|
+ clearable: true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ span: 6,
|
|
|
+ label: '负责人',
|
|
|
+ prop: 'contacts',
|
|
|
+ component: 'by-input',
|
|
|
+ labelWidth: '70px',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ placeholder: '请输入负责人',
|
|
|
+ clearable: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '状态',
|
|
|
+ prop: 'status',
|
|
|
+ labelWidth: '70px',
|
|
|
+ component: 'by-select',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ placeholder: '请选择状态',
|
|
|
+ clearable: true,
|
|
|
+ data: [{
|
|
|
+ value: 1,
|
|
|
+ label: '正常'
|
|
|
+ }, {
|
|
|
+ value: 2,
|
|
|
+ label: '禁用'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ tool: {
|
|
|
+ tools: {
|
|
|
+ add: true,
|
|
|
+ delete: true,
|
|
|
+ search: true,
|
|
|
+ refresh: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ table: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ seq: true,
|
|
|
+ align: 'center',
|
|
|
+ checkbox: true,
|
|
|
+ height: 600
|
|
|
+ },
|
|
|
+ columns: [{
|
|
|
+ title: '名称',
|
|
|
+ field: 'name',
|
|
|
+ isDetail: true,
|
|
|
+ width: 300,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '负责人',
|
|
|
+ field: 'contacts',
|
|
|
+ width: 300,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 80,
|
|
|
+ title: '状态',
|
|
|
+ field: 'status',
|
|
|
+ component: Assembly,
|
|
|
+ }, {
|
|
|
+ width: 500,
|
|
|
+ title: '备注',
|
|
|
+ field: 'remark',
|
|
|
+ }, {
|
|
|
+ width: 120,
|
|
|
+ title: '操作',
|
|
|
+ action: true,
|
|
|
+ plugins: [{
|
|
|
+ icon: 'el-icon-edit',
|
|
|
+ name: '编辑',
|
|
|
+ audit: '',
|
|
|
+ event: {
|
|
|
+ click: (item : any) => {
|
|
|
+ (this as any).openEdit(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ name: '删除',
|
|
|
+ event: {
|
|
|
+ click: (item : any) => (this as any).doDelete2(item)
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ }
|
|
|
+ addConfig = {
|
|
|
+ attr: {
|
|
|
+ size: 'small',
|
|
|
+ rules: {
|
|
|
+ name: [{
|
|
|
+ required: true, message: '请输入名称', trigger: 'blur'
|
|
|
+ }],
|
|
|
+ contacts: [{
|
|
|
+ required: true, message: '请输入负责人', trigger: 'blur'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 23,
|
|
|
+ labelWidth: '70px',
|
|
|
+ label: '名称',
|
|
|
+ prop: 'name',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 23,
|
|
|
+ labelWidth: '70px',
|
|
|
+ label: '负责人',
|
|
|
+ prop: 'contacts',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 23,
|
|
|
+ labelWidth: '70px',
|
|
|
+ label: '状态',
|
|
|
+ slot: true,
|
|
|
+ prop: 'status',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 23,
|
|
|
+ labelWidth: '70px',
|
|
|
+ label: '备注',
|
|
|
+ prop: 'remark',
|
|
|
+ component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ placeholder: '请输入备注',
|
|
|
+ type: 'textarea'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ mounted() {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.getDataList()
|
|
|
+ }, 300)
|
|
|
+ }
|
|
|
+ //点击树获取数据
|
|
|
+ onChangeTree(e : any) {
|
|
|
+ console.log('点击结果:', e)
|
|
|
+ this.parentId = e.id[0]
|
|
|
+ api.childrenTreeList({ id: e.id[0], pageNo: 1, pageSize: 999 }, 'maindataMaterialManufacturer').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ (this.$refs.moduleView as any).setTableValue(res.data);
|
|
|
+ let page = {
|
|
|
+ pageNo: res.data.current, //当前页
|
|
|
+ pageSize: res.data.size, //每页条数
|
|
|
+ total: res.data.total //总条数
|
|
|
+ };
|
|
|
+ (this.$refs.moduleView as any).setPage(page)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 确认新增/编辑
|
|
|
+ confirm() {
|
|
|
+ (this as any).$refs.addFormId.validate().then(() => {
|
|
|
+ let query = (this as any).$refs.addFormId.getValue();
|
|
|
+ console.log(query);
|
|
|
+ query.status = this.radio;
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ if (this.popTitle === '新增') {
|
|
|
+ api.saveList(query, 'maindataMaterialManufacturer').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success(this.popTitle + '成功!');
|
|
|
+ (this as any).$refs.sideTree.request();
|
|
|
+ this.getDataList();
|
|
|
+ } else this.$message.error(res.msg);
|
|
|
+ })
|
|
|
+ } else if (this.popTitle === '编辑') {
|
|
|
+ api.updateList(query, 'maindataMaterialManufacturer').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success(this.popTitle + '成功!');
|
|
|
+ (this as any).$refs.sideTree.request();
|
|
|
+ this.getDataList();
|
|
|
+ } else this.$message.error(res.msg);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 获取列表数据
|
|
|
+ getDataList() {
|
|
|
+ if (!this.$refs.moduleView) {
|
|
|
+ if (this.timeNum > 5) {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ }
|
|
|
+ this.timeNum++;
|
|
|
+ return
|
|
|
+ }
|
|
|
+ clearInterval(this.timer)
|
|
|
+ let query = (this.$refs.moduleView as any).getQuery();
|
|
|
+ api.pageList(query, 'maindataMaterialManufacturer').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ (this.$refs.moduleView as any).setTableValue(res.data.records);
|
|
|
+ let page = {
|
|
|
+ pageNo: res.data.current, //当前页
|
|
|
+ pageSize: res.data.size, //每页条数
|
|
|
+ total: res.data.total //总条数
|
|
|
+ };
|
|
|
+ (this.$refs.moduleView as any).setPage(page)
|
|
|
+ } else this.$message.error(res.msg);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 工具栏方法
|
|
|
+ clickHandle(e : any) {
|
|
|
+ if (e === 'onAdd') this.onAdd();
|
|
|
+ if (e === 'onDelete') this.onDelete();
|
|
|
+ if (e === 'onExport') this.onExport();
|
|
|
+ }
|
|
|
+ // 打开新增
|
|
|
+ onAdd() {
|
|
|
+ this.popTitle = '新增'
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+ this.radio = 1
|
|
|
+ setTimeout(() => {
|
|
|
+ if ((this as any).$refs.addFormId) (this as any).$refs.addFormId.setValue('');
|
|
|
+ }, 0)
|
|
|
+ }
|
|
|
+ // 打开编辑
|
|
|
+ openEdit(e : any) {
|
|
|
+ this.popTitle = '编辑'
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+ this.radio = e.status
|
|
|
+ setTimeout(() => {
|
|
|
+ if ((this as any).$refs.addFormId) (this as any).$refs.addFormId.setValue(e);
|
|
|
+ }, 0)
|
|
|
+ }
|
|
|
+ // 工具栏删除
|
|
|
+ onDelete() {
|
|
|
+ let selectData = (this.$refs.moduleView as any).getSelectData()
|
|
|
+ let ids = '';
|
|
|
+ if (selectData.length > 0) {
|
|
|
+ selectData.map((v : any) => {
|
|
|
+ ids += v.id + ','
|
|
|
+ })
|
|
|
+ } else return this.$message.warning('请选择删除数据');
|
|
|
+ ids = ids.slice(0, ids.length - 1);
|
|
|
+ this.$confirm('确定删除吗,此操作不能撤销!', '注意', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ center: true
|
|
|
+ }).then(() => {
|
|
|
+ api.deleteList({ ids: ids }, 'maindataMaterialManufacturer').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ (this as any).$refs.sideTree.request();
|
|
|
+ this.getDataList();
|
|
|
+ this.$message.success('删除成功!');
|
|
|
+ } else this.$message.error(res.msg);
|
|
|
+ })
|
|
|
+ }).catch(() => this.$message.info('已取消删除'));
|
|
|
+ }
|
|
|
+ // 操作删除
|
|
|
+ doDelete2(item : any) {
|
|
|
+ this.$confirm('确定删除吗,此操作不能撤销!', '注意', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ center: true
|
|
|
+ }).then(() => {
|
|
|
+ api.deleteList({ ids: item.id }, 'maindataMaterialManufacturer').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ (this as any).$refs.sideTree.request();
|
|
|
+ this.getDataList();
|
|
|
+ this.$message.success('删除成功!');
|
|
|
+ } else this.$message.error(res.msg);
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.info('已取消删除');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 刷新
|
|
|
+ onRefresh() {
|
|
|
+ this.loading = this.$loading({ target: '.main-container' });
|
|
|
+ (this as any).$refs.moduleView.clearSearch();
|
|
|
+ api.pageList({}, 'maindataMaterialManufacturer').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ (this.$refs.moduleView as any).setTableValue(res.data.records);
|
|
|
+ let page = {
|
|
|
+ pageNo: res.data.current, //当前页
|
|
|
+ pageSize: res.data.size, //每页条数
|
|
|
+ total: res.data.total //总条数
|
|
|
+ };
|
|
|
+ (this.$refs.moduleView as any).setPage(page);
|
|
|
+ this.loading.close();
|
|
|
+ } else this.$message.error(res.msg);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //导出
|
|
|
+ onExport() {
|
|
|
+ let urlArr = '/maindata/maindataMaterial';
|
|
|
+ let query = (this.$refs.moduleView as any).getQuery();
|
|
|
+ (this as any).$download(urlArr + '/export', {
|
|
|
+ ...query
|
|
|
+ }, urlArr[urlArr.length - 1] + `_${new Date().getTime()}.xlsx`)
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .my-container {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ padding: 16px;
|
|
|
+
|
|
|
+ .search-btn {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bill-left {
|
|
|
+ position: relative;
|
|
|
+ border-right: solid #EEE 1px;
|
|
|
+ padding-right: 16px;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ // box-sizing: border-box;
|
|
|
+ .bill-tab {
|
|
|
+ width: 150px;
|
|
|
+ height: 100%;
|
|
|
+ transition: all .5s;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bill-nav {
|
|
|
+ font-size: 14px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ width: 200px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .onBill {
|
|
|
+ background-color: #bde3f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bill-nav:hover {
|
|
|
+ background-color: #bde3f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close {
|
|
|
+ height: 22px;
|
|
|
+ width: 22px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: solid #EEE 1px;
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ right: -11px;
|
|
|
+ background-color: #FFF;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bill-main {
|
|
|
+ width: calc(100% - 16px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-left: 16px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .bill-box {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ opacity: 0;
|
|
|
+ z-index: -1;
|
|
|
+ transition: all .5s;
|
|
|
+
|
|
|
+ .bill-tool,
|
|
|
+ .table-tool {
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .on-show {
|
|
|
+ opacity: 1;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|