BST_bigScreen/src/views/BasicSettings/Materialfield.vue

<template>
  <div>
    <FullPage title='物料分类字段'
              :list='list'
              @init='init'
              :loading='loading'
              @searchData='init'
              @changePage='changePage'
              @changeSize='changeSize'
              :tableColums='tableColums'
              :tableData='tableData'
              :pageIndex='pageIndex'
              :total='total'>
      <div slot='titleButton'>
        <Button type="primary"
                ghost
                icon='md-add'
                @click="addItems(classInfo)">新增物料分类</Button>
      </div>
      <div slot='navButton'>
      </div>

      <template slot="basicTypeSet"
                slot-scope="{row}">
        <span v-show="row.type_id==item.id"
              v-for="item in materialTypeList"
              :key="item.id">
          {{item.title}}
        </span>
      </template>
      <template slot='set'
                slot-scope='{row}'>
        <div class="table-set">
          <svg style="font-size:20px"
               color='#3764FF'
               @click="addItems(row)"
               class="icon icon-nav"
               aria-hidden="true">
            <use xlink:href="#iconbianji"></use>
          </svg>

          <svg @click="delItems(row)"
               class="icon icon-nav"
               style="font-size:20px"
               color='red'
               aria-hidden="true">
            <use xlink:href="#iconshanchu"></use>
          </svg>
        </div>
      </template>

      <div>
        <Modal class-name="vertical-center-modal"
               :title="showType == 1 ? '新增物料分类': '编辑物料分类'"
               v-model="showModal"
               :width="480"
               @on-visible-change='vivibleModal'>
          <Form :label-width="90">
            <FormItem label="物料分类：">
              <Input placeholder=""
                     v-model="classInfo.title" />
            </FormItem>
            <FormItem label="所属分类：">
              <Select v-model="classInfo.type_id">
                <Option v-for="(item) of materialTypeList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.title"></Option>
              </Select>
            </FormItem>
            <FormItem label="子分类：">
              <Select v-model="classInfo.sub_type">
                <Option :value=0
                        label="无"></Option>
                <Option :value=1
                        label="胶水"></Option>
                <Option :value=2
                        label="包材"></Option>
              </Select>
            </FormItem>
          </Form>

          <div class="modal-footer"
               slot='footer'>
            <Button @click='showModal = false'>取消</Button>
            <Button type="primary"
                    @click="postInfo">确定</Button>
          </div>
        </Modal>
      </div>

    </FullPage>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data () {
    return {
      list: [
        { title: '物料分类名称', name: 'Input', value: '', serverName: 'title', placeholder: '请输入物料分类名称' },
      ],
      tableColums: [
        { title: '序号', type: 'index', align: 'center', key: 'id', width: '100' },
        { title: '物料分类', align: 'center', key: 'title' },
        { title: '物料所属分类', align: 'center', key: 'title', slot: 'basicTypeSet' },
        { title: '操作', align: 'center', slot: 'set', width: '150' },
      ],
      tableData: [],
      pageIndex: 1,
      total: 0,
      pageSize: 10,
      showModal: false,
      showType: 1,
      classInfo: {
        type_id: '',
        title: '',
        sub_type: ''
      },
      proxyObj: {},
      loading: false,
      attribute: [{ title: '' }],
      repeatFlag: false,
      materialTypeList: []
    }  
  },
  
  mounted () {
    this.initData()
  },
  methods: {
    ...mapActions(['undata_navData']),
    initData () {
      //加载所属分类
      this.axios({
        method: 'get',
        url: '/api/basics_material_type',
      }).then((res) => {
        this.materialTypeList = res.data
      }).catch((err) => {
      });
    },
    init (row) {
      this.pageIndex = 1
      row.page_index = this.pageIndex;
      row.page_size = this.pageSize;
      this.proxyObj = row;
      this.getData(row)
    },
    getData (row) {
      this.loading = true;
      this.axios('/api/basics_material_index', { params: row }).then(res => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.total;
        // this.undata_navData()/////
      })
    },
    changePage (e) {
      this.pageIndex = e;
      this.proxyObj.page_index = e;
      this.getData(this.proxyObj)
    },
    changeSize (e) {
      this.pageSize = e;
      this.proxyObj.page_size = this.pageSize;
      this.getData(this.proxyObj)
    },
    addItems (obj) {
      this.showModal = true;
      if (obj.id) {
        this.showType = 2
        this.classInfo.id = obj.id;
        this.classInfo.title = obj.title;
        this.classInfo.type_id = obj.type_id;
        this.classInfo.sub_type = obj.sub_type_id
      } else {
        //新增
        this.showType = 1
        this.classInfo.id = obj.id;
        this.classInfo.title = obj.title;
        this.classInfo.type_id = obj.type_id;
      }
    },
    delItems (row) {
      this.confirmDelete({
        content: '确认删除么？',
        then: () => {
          this.axios.post('/api/basics_material_del', { id: row.id, state: 0 }).then(res => {
            if (res.code == 200) {
              this.$Message.success(res.msg)
              this.getData(this.proxyObj)
              this.undata_navData()
            }
          })
        }
      })
    },
    vivibleModal (e) {
      if (!e) {
        this.classInfo = {
          id: '',
          title: ''
        }

        this.attribute = [{ title: '' }]
        this.repeatFlag = false;
      }
    },
    add (array) {
      array.push({ title: '' })
    },
    remove (array, n) { array.splice(n, 1) },
    postInfo () {
      let postData = {}, post_url = '';
      if (this.showType == 1) {
        post_url = '/api/basics_material_add';
        let result = []
        this.attribute.map(v => result.push(v.title))
        // postData = {
        //   id: this.classInfo.id,
        //   title: result.join(',')
        // }
        postData = this.classInfo;
      } else {
        post_url = '/api/basics_material_edit'
        postData = this.classInfo;
      }
      this.axios.post(post_url, postData).then(res => {
        if (res.code == 200) {
          this.$Message.success(res.msg)
          this.getData(this.proxyObj)
          this.undata_navData()
          this.showModal = false;
        } else {
          if (Array.isArray(res.data)) {
            this.repeatFlag = true
            let result = []
            res.data.map(v => {
              let obj = {};
              v ? obj.title = v : ''
              obj.title ? result.push(obj) : ''
            })
            this.attribute = result;
            this.getData(this.proxyObj)
            this.undata_navData()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item-attr {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>