lanan-repair-app/pages-repair/apply/newWare.vue

<template>
  <view class="container">
    <VNavigationBar background-color="#fff" title="新增配件" title-color="#333"></VNavigationBar>
    <view class="listBox">
      <view class="list">
        <view class="formItem">
          <text class="formLabel require">配件名称</text>
          <input type="text" style="text-align: right" v-model="formData.name" placeholder="请输入配件名称"/>
        </view>
        <view class="formItem">
          <text class="formLabel require">所属分类</text>
          <picker @change="typePickerChange" :value="typeIndex" :range="allTypeNameList">
            <view class="uni-input">{{allTypeNameList[typeIndex]}}</view>
          </picker>
        </view>
        <view class="formItem">
          <text class="formLabel require">计量单位</text>
          <picker @change="unitPickerChange" :value="unitIndex" :range="allUnitNameList">
            <view class="uni-input">{{allUnitNameList[unitIndex]}}</view>
          </picker>
        </view>
        <view class="formItem">
          <text class="formLabel">规格型号</text>
          <input type="text" style="text-align: right" v-model="formData.model" placeholder="请输入规格型号"/>
        </view>
        <view class="formItem">
          <text class="formLabel">来源</text>
          <picker @change="fromPickerChange" :value="fromIndex" :range="allFromNameList">
            <view class="uni-input">{{allFromNameList[fromIndex]}}</view>
          </picker>
        </view>
        <view class="formItem">
          <text class="formLabel">配件属性</text>
          <picker @change="attributePickerChange" :value="attributeIndex" :range="allAttributeNameList">
            <view class="uni-input">{{allAttributeNameList[attributeIndex]}}</view>
          </picker>
        </view>
        <view class="formItem">
          <text class="formLabel">状态</text>
          <view>
            <radio-group v-model="formData.status">
              <label class="radio-label" v-for="(item, index) in radioOptions" :key="index">
                <radio :value="item.value" :checked="item.checked">{{ item.label }}</radio>
              </label>
            </radio-group>
          </view>
        </view>
        <view class="formItem">
          <text class="formLabel">条形码</text>
          <input type="text" style="text-align: right" v-model="formData.barCode" placeholder="请输入条形码"/>
        </view>
        <view class="formItem">
          <text class="formLabel">商品编码</text>
          <input type="text" style="text-align: right" v-model="formData.code" placeholder="请输入商品编码"/>
        </view>
        <view class="formItem">
          <text class="formLabel">适用子公司</text>
          <text class="formValue"></text>
        </view>
        <view style="padding-bottom: 60rpx;border-bottom: 1px solid #ddd;" class="formItem">
          <checkbox-group v-model="checkedCorpIdList" @change="cs">
            <checkbox v-for="(item, index) in allCompanyList" :key="index" :value="item.id" :checked="item.checked">{{ item.corpName }}</checkbox>
          </checkbox-group>
        </view>
        <view class="formItem">
          <text class="formLabel">适用车型</text>
          <text class="formValue"></text>
        </view>
        <view style="padding-bottom: 60rpx;border-bottom: 1px solid #ddd;" class="formItem">
          <textarea style="height: 50px" auto-height placeholder="请输入适用车型" v-model="formData.carModel" />
        </view>
        <view class="formItem">
          <text class="formLabel">备注</text>
          <text class="formValue"></text>
        </view>
        <view style="padding-bottom: 60rpx;border-bottom: 1px solid #ddd;" class="formItem">
          <textarea style="height: 50px" auto-height placeholder="请输入备注" v-model="formData.remark" />
        </view>
      </view>
    </view>
    <view class="footer">
      <text class="label"></text>
      <text class="repairNum"></text>
      <view class="submit" @click="submit">保存</view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from "@/components/VNavigationBar.vue";
import request from '@/utils/request';
import {getDictTextByCodeAndValue,createUniqueCodeByHead} from "@/utils/utils";
import {getUserInfo,getJSONData} from '@/utils/auth.js'

export default {
  components: {VNavigationBar},
  data() {
    return {
      //父组件传入的数据
      formData:{
        name:"",
        type:"",
        unit:"",
        model:"",
        dataForm:"",
        attribute:"",
        status:"",
        barCode:"",
        code:"",
        corpId:"",
        carModel:"",
        remark:"",
      },
      // 状态单选按钮的选项数组
      radioOptions: [
        { label: '启用', value: '01' ,checked:true},
        { label: '禁用', value: '02' ,checked:false}
      ],
      //所有可选分类
      allTypeList:[],
      //所有可选分类-只有名称
      allTypeNameList:[],
      //选中的分类下标
      typeIndex:0,
      //所有可选计量单位
      allUnitList:[],
      //所有可选计量单位-只有名称
      allUnitNameList:[],
      //选中的计量单位下标
      unitIndex:0,
      //所有可选来源
      allFromList:[],
      //所有可选来源-只有名称
      allFromNameList:[],
      //选中的来源下标
      fromIndex:0,
      //所有可选配件属性
      allAttributeList:[],
      //所有可选配件属性-只有名称
      allAttributeNameList:[],
      //选中的配件属性下标
      attributeIndex:0,
      //所有可选子公司
      allCompanyList:[],
      //选中的子公司id
      checkedCorpIdList:[],
    };
  },
  onLoad() {
    this.init()
  },
  computed: {

  },
  methods: {
    cs(e){
      this.checkedCorpIdList =e.detail.value
    },
    /**
     * 初始化配件数据
     */
    init() {
      //查所有可选分类
      this.selectBaseType()
      //查所有可选计量单位
      this.selectBaseUnit()
      //查所有可选来源
      this.selectDataFrom()
      //查所有可选属性
      this.selectAttribute()
      //查所有可选子公司
      this.selectCompany()
    },
    /**
     * 查所有可选分类
     */
    selectBaseType(){
      request({
        url: '/admin-api/conf/baseType/list',
        method: 'get',
        params: {type:"02"}
      }).then((res) => {
        console.log(res)
        if (res.code == 200 && res.data.length>0) {
          this.allTypeList = res.data
          this.allTypeNameList = res.data.map((item)=>{return item.name})
        }
      })
    },
    /**
     * 查所有可选计量单位
     */
    selectBaseUnit(){
      request({
        url: '/admin-api/system/dict-data/type',
        method: 'get',
        params:{type:"repair_unit"}
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.allUnitList = res.data
          this.allUnitNameList = res.data.map((item)=>{return item.label})
        }
      })
    },
    /**
     * 查所有可选来源
     */
    selectDataFrom(){
      request({
        url: '/admin-api/system/dict-data/type',
        method: 'get',
        params:{type:"wares_data_form"}
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.allFromList = res.data
          this.allFromNameList = res.data.map((item)=>{return item.label})
        }
      })
    },
    /**
     * 查所有可选属性
     */
    selectAttribute(){
      request({
        url: '/admin-api/system/dict-data/type',
        method: 'get',
        params:{type:"wares_attribute"}
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.allAttributeList = res.data
          this.allAttributeNameList = res.data.map((item)=>{return item.label})
        }
      })
    },
    /**
     * 查所有可选子公司
     */
    selectCompany(){
      request({
        url: '/admin-api/base/company/list',
        method: 'get'
      }).then((res) => {
        console.log(res)
        if (res.code == 200 && res.data.length>0) {
          this.allCompanyList = res.data
          this.allCompanyList.map((item)=>{
            item.checked=false
          })
        }
      })
    },
    /**
     * 选分类
     */
    typePickerChange: function(e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.typeIndex = e.detail.value
    },
    /**
     * 选计量单位
     */
    unitPickerChange: function(e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.unitIndex = e.detail.value
    },
    /**
     * 选来源
     */
    fromPickerChange: function(e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.fromIndex = e.detail.value
    },
    /**
     * 选属性
     */
    attributePickerChange: function(e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.attributeIndex = e.detail.value
    },
    /**
     * 新增配件
     */
    submit() {
      //校验必填
      if(!this.formData.name){
        uni.showToast({
          title: '请输入配件名称！',
          icon: 'none'
        })
        return
      }
      //组装可用的子公司

      console.log(this.allCompanyList,"this.checkedCorpIdList")
      debugger
      if(this.checkedCorpIdList.length>0){
        this.formData.corpId = this.checkedCorpIdList.join()
      }
      //组装所属分类
      this.formData.status = "01"
      this.formData.type = this.allTypeList[this.typeIndex].id
      this.formData.unit = this.allUnitList[this.unitIndex].value
      this.formData.dataForm = this.allFromList[this.fromIndex].value
      this.formData.attribute = this.allAttributeList[this.attributeIndex].value
      request({
        url: '/admin-api/repair/wares/create',
        method: 'post',
        data:this.formData
      }).then((res)=>{
        if (res.code == 200){
          uni.showToast({
            title: '新增成功！',
            icon: 'none'
          })
          setTimeout(()=>{
            uni.navigateBack()
          },700)
        }else{
          uni.showToast({
            title: '操作失败，请联系管理员！',
            icon: 'none'
          })
        }
      })
    }

  }
}
</script>

<style lang="scss">
.container {
  height: 100%;
  background-color: #F3F5F7;
  display: flex;
  flex-direction: column;
}
.listBox {
  padding: 30 rpx 32 rpx;
  flex: 1;
  height: 0;
}
.list {
  background-color: #fff;
  padding: 0 30rpx;
  height: 100%;
  overflow: auto;
}
.formItem {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 30rpx;

  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 20rpx;

  border-bottom: 1rpx solid #DDDDDD;
}
.require::before{
  content: "*";
  color: red;
}
.formLabel {
  font-size: 32rpx;
  color: #333333;
}

.formValue {
  flex: 1;
  width: 0;
  text-align: right;
  font-size: 32rpx;
  color: #999999;
}
.repairBottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.repairDesc {
  font-size: 28rpx;
  color: #858BA0;
}

.repairUnit {
  color: #333333;
}

.footer {
  padding: 14rpx 32rpx;
  background-color: #fff;
  display: flex;
  align-items: center;

  .repairNum {
    flex: 1;
    width: 0;
    margin-right: 10rpx;
  }

  .submit {
    width: 208rpx;
    height: 72rpx;
    background: #0174F6;
    border-radius: 38rpx 38rpx 38rpx 38rpx;
    text-align: center;
    line-height: 72rpx;
    font-size: 32rpx;
    color: #FFFFFF;
  }
}
</style>