123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229 |
- <template>
- <div>
- <el-dialog custom-class="myFields" :title="sign?'筛选字段':'显示栏位管理'" :visible.sync="dialogVisible" width="300px"
- :before-close="handleClose" :close-on-click-modal="false" :append-to-body="true">
- <div>
- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
- <p></p>
- <el-checkbox-group v-model="checked" @change="handleCheckedChange">
- <template>
- <draggable ref="el" v-model="filedList" @end="end" :options="{disabled: !order}" filter=".disabled">
- <div v-for="(field, index) in filedList" :key="field.value" style="padding:5px 0;">
- <el-checkbox :label="field.value" :disabled="field.disabled">
- <div>
- <div :class="field.disabled?'disabled':''" :style="{'cursor':order?'move':'pointer'}">{{ field.name }}</div>
- <div v-if="order && !field.disabled">
- <el-button type="text" :disabled="index == filedList.length - 1" class="down"> <i
- class="el-icon-sort-down" @click.stop.prevent="down(index, field)"></i></el-button>
- <el-button type="text" :disabled="index == 1" class="up"><i class="el-icon-sort-up"
- @click.stop.prevent="up(index, field)"></i></el-button>
- </div>
- </div>
- </el-checkbox>
- </div>
- </draggable>
- </template>
- </el-checkbox-group>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="handleClose">取 消</el-button>
- <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- import draggable from 'vuedraggable'
- export default {
- components: {
- draggable
- },
- props: {
- type: {
- type: String,
- default: null
- },
- projectId: {
- default: null,
- },
- taskId: {
- default: null,
- },
- sign: {
- type:Boolean,
- default: false,
- },
- productId:{
- default: null
- },
- url:{
- default:null
- },
- order:{
- default:true
- }
- },
- data() {
- return {
- //控制显示弹窗
- dialogVisible: false,
- //是否全选
- isIndeterminate: false,
- //全选
- checkAll: false,
- //选择
- checked: [],
- //显示栏位
- filedList: [],
- //按钮加载
- loading: false
- };
- },
- watch: {},
- computed: {},
- created() { },
- mounted() {
- },
- methods: {
- end(val){
-
- },
- //打开栏位
- open(data) {
- this.filedList = JSON.parse(JSON.stringify(data)).map(item=>{
- if(item.value == 'patentNo'){
- item.disabled = true
- }
- return item
- })
- this.checked = data.filter(item => {
- return item.ifHidden == false
- }).map(item => {
- return item.value
- })
- this.handleCheckedChange(this.checked)
- this.dialogVisible = true;
- },
- //下移
- down(index, file) {
- if(index == this.filedList.length -1){
- return
- }
- var arr = this.filedList
- this.filedList.splice(index, 2, arr[index + 1], arr[index])
- },
- //上移
- up(index, file) {
- if(index == 1){
- return
- }
- var arr = this.filedList
- this.filedList.splice(index - 1, 2, arr[index], arr[index - 1])
- },
- //关闭弹窗
- handleClose() {
- this.dialogVisible = false;
- },
- //提交更改
- submit() {
- for (var i = 0; i < this.filedList.length; i++) {
- this.filedList[i].order = i
- if (this.checked.includes(this.filedList[i].value)) {
- this.filedList[i].ifHidden = false
- } else {
- this.filedList[i].ifHidden = true
- }
- }
- var params = {
- tableName: this.type,
- value: this.filedList,
- projectId: this.projectId,
- taskId: this.taskId,
- productId:this.productId,
- }
- var apiItem = ''
- if(this.url){
- apiItem = this.url
- }else{
- // apiItem = (this.projectId == 0|| this.projectId || this.productId) ? 'setTableColumns' : 'setCustomField'
- apiItem = 'setTableColumns'
- }
-
- // sign为true时是统计栏位
- if (this.sign) {
- apiItem = 'setShowCountColumns'
- params.value = this.filedList.filter(item => {
- return item.ifHidden == false
- })
- }
- this.loading = true
- this.$api[apiItem](params).then((response) => {
- if (response.code == 200) {
- this.loading = false
- this.handleClose()
- // if (this.sign) {
- // this.$emit('getFieldList', this.filedList)
- // } else {
- this.$emit('getFieldList', this.filedList)
- // }
-
- }
- }).catch(error => {
- this.loading = false
- })
- },
- //全选
- handleCheckAllChange(val) {
- this.checked = val ? this.filedList.map(item => {
- return item.value
- }) : [];
- this.isIndeterminate = false;
- },
- //勾选
- handleCheckedChange(value) {
- let checkedCount = value.length;
- this.checkAll = checkedCount === this.filedList.length;
- this.isIndeterminate = checkedCount > 0 && checkedCount < this.filedList.length;
- },
- },
- };
- </script>
- <style lang="scss">
- .myFields {
- .el-checkbox {
- width: 100%;
- .el-checkbox__label {
- width: calc(100% - 10px);
- div {
- display: flex;
- justify-content: space-between;
- align-items: center;
- .down,
- .up {
- padding: 0;
- margin: 0;
- }
- i {
- color: #999;
- }
- i:hover {
- color: #409EFF;
- }
- }
- }
- }
- }
- </style>
- <style lang="scss" scoped>
- .disabled{
- cursor: not-allowed;
- }
- </style>
|