提交我的信息和原材料报检页面

Goldennfish

2023-07-18 1aeff8b542a22d6c6a2efbac87704bca554afee8

提交我的信息和原材料报检页面

 src/api/user.js

@@ -15,8 +15,8 @@
// 获取用户信息
export function getInfo() {
  return request({
    url: '/user/info',
    method: 'get'
    url: '/user/getUserById',
    method: 'post'
  })
}


 src/store/modules/user.js

@@ -1,12 +1,13 @@
import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { getToken, setToken, removeToken, getRefresh, setRefresh, removeRefresh } from '@/utils/auth'
import { resetRouter } from '@/router'

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: ''
    avatar: '',
    refresh: getRefresh()
  }
}

@@ -18,6 +19,9 @@
  },
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_REFRESH: (state, refresh) => {
    state.refresh = refresh
  },
  SET_NAME: (state, name) => {
    state.name = name
@@ -35,7 +39,9 @@
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        commit('SET_REFRESH', data.refresh)
        setToken(data.token)
        setRefresh(data.refresh)
        resolve()
      }).catch(error => {
        reject(error)

 src/utils/auth.js

@@ -1,6 +1,7 @@
import Cookies from 'js-cookie'

const TokenKey = 'vue_admin_template_token'
const RefreshKey = 'vue_admin_template_refresh'

export function getToken() {
  return Cookies.get(TokenKey)
@@ -13,3 +14,16 @@
export function removeToken() {
  return Cookies.remove(TokenKey)
}

export function getRefresh() {
  return Cookies.get(RefreshKey)
}

export function setRefresh(refresh) {
  return Cookies.set(RefreshKey, refresh)
}

export function removeRefresh() {
  return Cookies.remove(RefreshKey)
}


 src/views/personal/myInformation/index.vue

@@ -8,21 +8,32 @@
        </div>
        <div class="tips-btn">
          <span><i class="el-icon-edit" />操作：</span>
          <el-button type="text">编辑</el-button>
          <el-button type="text" @click="dialogFormVisible = true">编辑</el-button>
          <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" :rules="rules">
              <el-form-item label="账号" :label-width="formLabelWidth" prop="account">
                <el-input v-model="form.account" autocomplete="off" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitForm()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
      <div class="message">
        <div class="message-item"><span><i class="el-icon-edit" />用户名：</span>121212121212</div>
        <div class="message-item"><span><i class="el-icon-edit" />用户名：</span>{{infoTable.username}}</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />姓名：</span>
          <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}"/>{{ 'jack' }}</el-tag>
          <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />{{ infoTable.name }}</el-tag>
        </div>
        <div class="message-item">
          <span><i class="el-icon-edit" />电话号码：</span>
          19825217196</div>
          {{infoTable.cellPhone}}</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />邮箱：</span>
          1212112</div>
          {{infoTable.email}}</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />签名：</span>
          2121212121212121</div>
@@ -142,16 +153,16 @@
        </el-table-column>
      </el-table> -->
      <div class="message">
        <div class="message-item"><span><i class="el-icon-edit" />企业简称：</span>121212121212</div>
        <div class="message-item"><span><i class="el-icon-edit" />企业简称：</span>{{businessTable.businessSmallName}}</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />完整名称：</span>
          <span><i class="el-icon-edit" />完整名称：</span>{{ businessTable.businessBigName }}
        </div>
        <div class="message-item">
          <span><i class="el-icon-edit" />联系人：</span>
          <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}"/>{{ 'jack' }}</el-tag></div>
          <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />{{ businessTable.businessContact }}</el-tag></div>
        <div class="message-item">
          <span><i class="el-icon-edit" />联系人电话：</span>
          1212112</div>
          {{businessTable.businessPhone}}</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />加入状态：</span>
          2121212121212121</div>
@@ -161,31 +172,36 @@
</template>

<script>
import { getInfo } from '@/api/user'

// axios.defaults.baseURL = process.env.VUE_APP_BASE_API

export default {
  data() {
    return {
      infoTable: [
      infoTable:
        {
          username: 'jack',
          name: '张三',
          cellPhone: '138888888',
          email: '138888888@qq.com',
          signature: '我是法外狂徒'
        }

      ],
      businessTable: [
        },
      businessTable:
        {
          businessSmallName: '中天',
          businessBigName: '中天科技',
          businessContact: 'jack',
          businessPhone: '1388888888',
          businessStatus: 1
        }
      ]
        },
      dialogFormVisible: false,
      form: [],
      formLabelWidth: 120
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    clearFilter() {
@@ -195,6 +211,24 @@
    filterTag(value, row) {
      console.log(value, row)
      return row.businessStatus === value
    },
    submitForm() {
      // Handle form submission here
      // console.log(this.form);
      // POST请求
      this.dialogFormVisible = false
    },
    async getUserInfo() {
      const res = await getInfo()
      this.infoTable.name = res.data.uname
      this.infoTable.username = res.data.account
      this.infoTable.cellPhone = res.data.phone
      this.infoTable.email = res.data.email
      this.businessTable.businessSmallName = res.data.e_byname
      this.businessTable.businessBigName = res.data.e_name
      this.businessTable.businessContact = res.data.e_link_name
      this.businessTable.businessPhone = res.data.e_phone
      // console.log(res)
    }
  }
}
@@ -290,9 +324,6 @@
      //   max-width: 60%;
      // }
    }
  }
  .my-info{

  }
  .my-business{
    margin-top: 28px;

 src/views/rawMaterials/reportForInspection/index.vue

@@ -1,13 +1,287 @@
<template>
  <div>home</div>
  <div class="content-main">
    <div class="top-bar">
      <el-form ref="form" inline="true" :model="searchData">
        <el-form-item>
          <el-input
            v-model="searchData.keyword"
            class="input-form"
            placeholder="请输入申请单号/检验对象/对象位置/对象名称"
          >
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button type="primary" plain>重置</el-button>
        </el-form-item>
        <el-dropdown>
          <span class="retrieval">
            高级检索<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form>
      <el-form class="rightBtn">
        <el-form-item class="getDataBtn">
          <el-button type="primary" icon="el-icon-download" plain>获取ERP数据</el-button>
        </el-form-item>
        <el-form-item class="createBtn">
          <el-button type="primary" icon="el-icon-plus">新增检验单</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="library-table">
      <div class="table-header">
        <div class="search-bar">
          <el-radio-group v-model="radioValue">
            <el-radio-button label="全部" />
            <el-radio-button label="待提交" />
            <el-radio-button label="已提交" />
            <el-radio-button label="已作废" />
          </el-radio-group>
        </div>
      </div>
      <div class="table-box">
        <el-table
          ref="inspectionTable"
          :max-height="800"
          :cell-style="{textAlign: 'center'}"
          :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
          :data="inspectionTable"
          style="width: 100%"
        >
          <el-table-column
            prop="applicationOrdernumber"
            label="申请单号"
            min-width="200"
          />
          <el-table-column
            prop="typeofInspection"
            label="检验类型"
            min-width="200"
          />
          <el-table-column
            prop="objectofInspection"
            label="检验对象"
            min-width="200"
          />
          <el-table-column
            prop="palceofObject"
            label="对象位置"
            min-width="200"
          />
          <el-table-column
            prop="name"
            label="对象名称"
            min-width="200"
          />
          <el-table-column
            prop="date"
            label="登记日期"
            min-width="200"
          />
          <el-table-column
            prop="registrant"
            label="登记人"
            min-width="200"
          />
          <el-table-column
            prop="applicationTime"
            label="申请时间"
            min-width="200"
          />
          <el-table-column
            label="操作"
            min-width="200"
            :fixed="true"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
              <el-button type="text" size="small">作废</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
      <div>
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.inspectionTable.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
      </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      searchData: {
        keyword: ''
      },
      inspectionTable: [{
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      }
      ],
      currentPage: 1,
      total: 20, // 总条数
      pageSize: 100, // 每页的数据条数
      radioValue: '全部'
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    }
  }
}
</script>

<style lang="scss" scoped>
  .content-main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .top-bar{
    margin: -25px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 5px 24px 0px 24px;
  }
  .input-form{
    width: 500px;
  }
  .retrieval{
  float: right;
  font-size: 14px;
  color: rgb(0, 120, 255);
  line-height: 40px;
 }
 .rightBtn {
  display: flex;
  justify-content: flex-end;
}

.getDataBtn, .createBtn {
  margin-left: 10px; /* Optional: Add some space between the buttons */
}
.library-table{
      background-color: #fff;
      flex: 1;
      max-width: 100%;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 50px;
      display: flex;
      flex-direction: column;
      .table-header{
        padding: 20px;
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          padding: 0px 20px;
          margin-top: 20px;
          flex: 1;
          background: #fff;
          // padding: 20px 20px 10px 20px;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
</style>