elizebeth/src/xt_pages/data/components/addtion.vue

<template>
  <div class="main-contain">
    <div class=" sign-and-weigh-box" style="background: white">
      <!--<manufacturer-or-dealer-dialog-->
      <!--ref="dialog"-->
      <!--:titles="manufacturerDialog.titles"-->
      <!--:formValue="manufacturerDialog.formValue"-->
      <!--:visibility="manufacturerDialog.isVisibility"-->
      <!--:type="manufacturerDialog.type"-->
      <!--:isCreated="manufacturerDialog.isCreated"-->
      <!--v-on:dialog-comfirm="manufacturerDialogComfirm"-->
      <!--v-on:dialog-cancle="manufacturerDialogCancle"-->
      <!--&gt;</manufacturer-or-dealer-dialog>-->
      <addition-dialog
        ref="dialog"
        :titles="Dialog.titles"
        :formValue="Dialog.formValue"
        :visibility="Dialog.isVisibility"
        :type="Dialog.type"
        :isCreated="Dialog.isCreated"
        v-on:dialog-comfirm="dialogComfirm"
        v-on:dialog-cancle="dialogCancle"

      ></addition-dialog>


      <el-row :gutter="15">
        <el-col>
          <div>
            <el-button
              size="small"
              icon="el-icon-circle-plus-outline"
              style="float: right;margin-bottom: 15px"
              type="primary"
              @click="showDialog"
            >新增
            </el-button>
          </div>

          <el-table
            :row-style="{ color: '#303133' }"
            :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266'
            }"
            :data="manufacturerData"
            style="width: 100%"
            border
            v-loading="loading"
          >
            <el-table-column label="国家编码" align="center">
              <template slot-scope="scope">
                {{ scope.row.code }}
              </template>
            </el-table-column>



            <el-table-column label="费用名称" align="center">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>


            <el-table-column label="金额" align="center">
              <template slot-scope="scope">
                {{ scope.row.price }}元
              </template>
            </el-table-column>



            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-edit-outline"
                    @click="handleEdit(scope.$index, scope.row)"
                  >
                  </el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button
                    size="small"
                    type="danger"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.$index, scope.row)"
                  >
                  </el-button>
                </el-tooltip>

              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 50, 100]"
            :page-size="10"
            background
            align="right"
            style="margin-top:20px;"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {
    createAddition,
    modifyAddition,
    getAdditionList,
    deleteAddition,
    GetAddition
  } from '@/api/data'
  import AdditionDialog from './additionDialog'

  export default {
    components: {
      AdditionDialog,
    },
    name: 'addtion',
    data() {
      return {
        signAndWeighBoxPatients: 'sign-and-weigh-box-patients',
        manufacturerData: [],
        total: 0,
        pageTotal: 0,
        pageSelect: 0,

        page: 1,
        limit: 10,
        loading: false,

        manufacturer_code: '',
        editId: '',
        editIndex: '',
        Dialog: {
          titles: '新增',
          isVisibility: false,
          isCreated: 1, //1.创建 2.编辑 3.查看详情
          formValue: {
            name: '',
            code: '',
            price: '',

          },
          resetForm: {
            name: '',
            code: '',
            price: '',
          }
        }
      }
    },
    methods: {
      handleEdit: function(index, row) {
        this.editId = row.id
        this.editIndex = index
        let params = {
          id: row.id
        }
        GetAddition(params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.Dialog.formValue.class_name =
              response.data.data.addition.name
            this.Dialog.formValue.content_code =
              response.data.data.addition.code
            this.Dialog.formValue.price =
              response.data.data.addition.price

            this.Dialog.isCreated = 2
            this.$refs.dialog.show()

          }
        })
      },
      handleDelete: function(index, row) {
        this.$confirm('确认删除这条记录?', '删除记录', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            let params = {
              id: row.id
            }
            deleteAddition(params).then(response => {
              if (response.data.state == 0) {
                this.$message.error(response.data.msg)
                return false
              } else {
                this.manufacturerData.splice(index, 1)
                this.$message.success('厂家已经删除')
              }
            })
          })
          .catch(() => {
          })
      },
      showDetails: function(index, row) {
        let params = {
          id: row.id
        }
        GetAddition(params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.Dialog.formValue.name =
              response.data.data.addition.name
            this.Dialog.formValue.code =
              response.data.data.addition.code
            this.Dialog.formValue.price =
              response.data.data.addition.price


            this.Dialog.isCreated = 3
            this.Dialog.isVisibility = true
          }
        })
      },
      dialogComfirm: function(val) {
        // this.manufacturerDialog.isVisibility = false
        this.$refs.dialog.hide()
        if (val.isCreated == 2) {
          //修改
          let params = {
            name: val.name,
            code: val.code,
            price: val.price,
            id: this.editId,

          }
          modifyAddition(params).then(response => {
            if (response.data.state == 0) {
              this.$message.error(response.data.msg)
              return false
            } else {
              this.manufacturerData[this.editIndex].name =
                response.data.data.addition.name
              this.manufacturerData[this.editIndex].code =
                response.data.data.addition.code
              this.manufacturerData[this.editIndex].price =
                response.data.data.addition.price
              this.$message.success('修改成功')
            }
          })
        } else if (val.isCreated == 1) {
          //新增
          createAddition(val).then(response => {
            if (response.data.state == 0) {
              this.$message.error(response.data.msg)
              return false
            } else {
              this.manufacturerData.unshift(response.data.data.addition)

              this.$message.success('新增成功')
            }
          })
        }
      },
      dialogCancle: function() {
        this.$refs.dialog.hide()
      },
      showDialog: function() {
        this.Dialog.formValue = Object.assign(
          {},
          this.Dialog.resetForm
        )
        this.$refs.dialog.show()
        this.Dialog.isCreated = 1
      },
      handleSizeChange(val) {
        this.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.page = val
        this.getList()
      },
      getList() {
        let params = {
          page: this.page,
          limit: this.limit
        }
        this.loading = true
        getAdditionList(params).then(response => {
          if (response.data.state == 0) {
            this.loading = false
            this.$message.error(response.data.msg)
            return false
          } else {
            this.loading = false
            this.total = response.data.data.total
            this.manufacturerData = []
            for (let i = 0; i < response.data.data.addition.length; i++) {
              this.manufacturerData.push(response.data.data.addition[i])
            }
          }
        })
      }
    },
    created() {
      this.getList()
    }
  }
</script>

<style lang="scss">
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #d0d3da;
  }

  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #d0d3da;
  }
</style>