清单页面全屏

master
lion 2 years ago
parent e2b4a3f3f0
commit c5da4a58cf

@ -0,0 +1,333 @@
<template>
<div style="padding:20px">
<div>
<div ref="lxHeader">
<lx-header icon="md-apps" text="填报清单" style="margin-bottom: 10px; border: 0px; margin-top: 0px">
<slot>
<div>
<div style="margin-bottom:15px;margin-top:15px;">
<span style="margin-right:15px;display: inline-block;width:45px;vertical-align: top;">年度 </span>
<el-radio-group style="width:90%" v-model="select.year" @change="changeYear">
<el-radio style="margin-right:5px;margin-bottom:5px" v-for="item in yearList" border
:label="item">{{item}}</el-radio>
</el-radio-group>
</div>
<div>
<span style="margin-right:15px;display: inline-block;width:45px;vertical-align: top;">类型 </span>
<el-radio-group style="width:90%" @change="changeCategoryType" v-model="select.category_type_id">
<el-radio style="margin-right:5px;margin-bottom:5px" v-for="item in categoryTypeList" border
:label="item.id">{{item.title}}</el-radio>
</el-radio-group>
</div>
</div>
</slot>
</lx-header>
</div>
</div>
<div>
<!-- <div style="margin-bottom:15px;">
<el-button v-if="select.category_type_id" @click="$refs['create'].setType('add'),
$refs['create'].setForm('type_id', select.category_type_id),
$refs['create'].setForm('year', select.year.toString()),
$refs['create'].show()" plain>新建{{select.year}}{{select.categoryTypeName}}清单</el-button>
</div> -->
<xy-table ref="xyTable" :is-page="false" :list="list" res-prop="" :indent="20" :row-key="row => row._index"
:table-item="table" :auths="auths_auth_mixin" :req-opt="select" :destroy-action="destroy" @editor="row => {
$refs['create'].setId(row.id);
$refs['create'].setType('editor');
$refs['create'].show();
}" @destroyed="getList">
<template v-slot:btns>
<el-table-column align='center' fixed="right" label="操作" width="220" header-align="center">
<template slot="header" slot-scope="scope">
<el-button
size="mini" @click="">整体克隆</el-button>
</template>
<template slot-scope="scope">
<div style="display: flex;">
<Button v-if="scope.row._type !== 'type'" size="small" type="primary" @click="$refs['create'].setId(scope.row.id),
$refs['create'].setType('editor'),
$refs['create'].show();">编辑</Button>
<el-popover width="180" v-if="scope.row._type !== 'type'" :ref="`${scope.row.id}-${scope.$index}`" trigger="hover">
<template>
<div>
<p style="padding-bottom: 10px;">确定要删除吗</p>
<div style="text-align: right;margin: 0;">
<el-button size="mini" type="text" @click="$refs[`${scope.row.id}-${scope.$index}`].doClose()"></el-button>
<el-button type="primary" size="mini"
@click="$refs['xyTable'].deleteClick(scope.row, 'delete')">确定</el-button>
</div>
</div>
</template>
<template #reference>
<div style="margin-right: 6px;height: 100%;width: 100%;">
<Button type="error" size="small" @click="$refs[`${scope.row.id}-${scope.$index}`].doShow()">
删除
</Button>
</div>
</template>
</el-popover>
<Button size="small" type="primary" @click="createChild(scope.row)"></Button>
</div>
</template>
</el-table-column>
</template>
</xy-table>
</div>
<create ref="create" :options="list" @refresh="getList"></create>
<categorySetting ref="categorySetting"></categorySetting>
<createRules ref="createRules" @refresh="getList"></createRules>
</div>
</template>
<script>
import {
index,
destroy,
categoryYears,
categoryTypes
} from "@/api/category"
import {
authMixin
} from "@/mixin/authMixin";
import headerContent from "@/components/LxHeader/XyContent.vue";
import LxHeader from "@/components/LxHeader/index.vue";
import create from "@/views/category/component/create.vue";
import categorySetting from "@/views/category/component/categorySetting.vue";
import createRules from "@/views/category/component/createRules.vue";
export default {
mixins: [authMixin],
components: {
categorySetting,
headerContent,
LxHeader,
create,
createRules
},
data() {
return {
provideOptions: [],
yearList: [],
categoryTypeList:[],
select: {
year: '',
category_type_id:'',
categoryTypeName:''
},
isStartSelect: false,
list: [],
table: [
// {
// type: "selection",
// width: 48,
// selectable: row => {
// return row._type === 'type' ? false : this.isStartSelect;
// }
// },
{
type: "",
label: "",
prop: "index",
fixed:'left',
customFn: row => {
return row._type === 'type' ? row._text : row._index;
}
},
{
prop: "title",
label: '清单',
align: "left",
customFn: row => {
return row._type === 'type' ? ( <span> <i style = "padding: 0 8px;color: rgb(239, 216, 117);"
class = "el-icon-folder-opened"> </i><span>{row.title}</span> </span>) : ( <span> < i style = "padding: 0 8px;"
class = "el-icon-document" > </i><span>{row.title}</span > </span>)
}
},
{
prop: "records_count",
label: "预警规则",
fixed:"right",
customFn: row => {
return(<div>
<el-button plain type='primary' size="mini"
on = {
{
['click']: (e) => {
this.createRules(row)
}
}
}
>规则设置</el-button>
<div>{
row.rules.map(item=>{
return(<div>{item.start_at}~{item.end_at}不少于{item.quantity}</div>)
})
}</div>
</div>)
}
},
{
prop: "myindex",
label: "排序",
}]
}
},
created() {
this.getPastYears()
this.getList()
// this.yearList = this.getPastYears(5)
this.getCategoryType()
// this.select.year = this.$moment().format('YYYY')
},
methods: {
index,
destroy,
getCategoryType(){
categoryTypes().then(res=>{
this.categoryTypeList = res
this.select.category_type_id = res.length>0?res[0].id:''
this.select.categoryTypeName = res.length>0?res[0].title:''
})
},
changeYear(e){
if(e){
this.getList()
}
},
changeCategoryType(e){
if(e){
this.categoryTypeList.map(item=>{
if(item.id===e){
this.select.categoryTypeName = item.title
}
})
this.getList()
}
},
toChineseNum(number) {
const chineseNum = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
const chineseUnit = ["", "十", "百", "千", "万", "亿"];
let numStr = number.toString();
let len = numStr.length;
let str = "";
for (let i = 0; i < len; i++) {
str += chineseNum[parseInt(numStr[i])] + chineseUnit[len - 1 - i];
}
str = str.replace(/零[十百千]/g, "零");
str = str.replace(/零+/g, "零");
str = str.replace(/^零+/, "");
str = str.replace(/零+$/, "");
if (str[str.length - 1] === "零") {
str = str.slice(0, -1);
}
return str
},
formatList(data = [], pid) {
data.forEach((item, index) => {
if (item.hasOwnProperty('categories_tree')) {
item._id = item.id
delete item.id;
item._disabled = true
item._type = 'type'
item.children = item.categories_tree
item._text = this.toChineseNum(index + 1)
} else {
item._type = 'doc'
item._index = pid ? `${pid}-${index+1}` : (index + 1)
// item._index = pid ? (index+1) : (index + 1)
}
if (item.children instanceof Array && item.children.length > 0) {
this.formatList(item.children, item._index ? item._index : false)
}
})
},
getPastYears(years) {
categoryYears().then(res=>{
this.yearList = res.years
this.select.year = res.selected_year
})
},
async getList() {
let res = await index({
year:this.select.year,
category_type_id:this.select.category_type_id
});
this.formatList(res);
this.list = res;
},
createChild(row) {
let category_type_id = this.select.category_type_id
if(row.type_id){
category_type_id = row.type_id
}
if (row._type === 'type') {
this.$refs['create'].setForm('type_id', category_type_id);
this.$refs['create'].setForm('pid', 0);
this.$refs['create'].setForm('year', this.select.year.toString());
this.$refs['create'].setType('add');
this.$refs['create'].show();
} else {
this.$refs['create'].setForm('type_id', category_type_id);
this.$refs['create'].setForm('pid', row.id);
this.$refs['create'].setForm('year', this.select.year.toString());
this.$refs['create'].setType('add');
this.$refs['create'].show();
}
},
createRules(row){
console.log(row)
if(row._type==='type'){
this.$refs['createRules'].category_id = row._id
}else{
this.$refs['createRules'].category_id = row.id
}
this.$refs['createRules'].title = row.title;
this.$refs['createRules'].isShow = true;
}
},
computed: {},
watch: {
isStartSelect(newVal) {
const selections = this.$refs['xyTable'].getSelection()
if (!newVal && selections.length > 0) {
this.$refs['categorySetting'].setSelections(selections)
this.$refs['categorySetting'].show()
}
}
}
}
</script>
<style scoped lang="scss">
a {
color: $primaryColor;
text-decoration: none;
transition: all 0.2s;
}
a:hover {
color: $primaryColor;
text-decoration: underline;
}
</style>

@ -8,7 +8,7 @@ import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login','/h5/login'] // no redirect whitelist
const whiteList = ['/login','/h5/login','/full'] // no redirect whitelist
router.beforeEach(async(to, from, next) => {
// start progress bar

@ -25,7 +25,7 @@ module.exports = {
* Detail: https://cli.vuejs.org/config/#publicpath
*/
publicPath: process.env.ENV === 'staging' ? '/admin_test' : '/admin',
outputDir: './dist',
outputDir: '/Users/mac/Documents/朗业/2023/y-一把手/jiwei/public/admin',
assetsDir: 'static',
css: {
loaderOptions: { // 向 CSS 相关的 loader 传递选项

Loading…
Cancel
Save