lanan-repair-app/pages/project/project.vue

<template>
  <view class="container">
    <VNavigationBar :title="pageTitle" background-color="#fff" title-color="#333"></VNavigationBar>
    <view class="body">
      <u-form labelPosition="top">
        <view class="card">
          <u-form-item borderBottom label="名称" labelWidth="200">
            <u-input v-model="project.name" border="none" placeholder="请输入名称"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="编码" labelWidth="200">
            <u-input v-model="project.code" border="none" placeholder="请输入编码"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="成本" labelWidth="200">
            <u-input v-model="project.cost" border="none" placeholder="请输入成本" @blur="costBlur('cost')"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="售价" labelWidth="200">
            <u-input v-model="project.price" border="none" placeholder="请输入售价" @blur="costBlur('price')"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="规格" labelWidth="200">
            <u-input v-model="project.spec" border="none" placeholder="请输入规格"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="单位" labelWidth="200" @click="unitType = true;">
            <u-input
                v-model="unit"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择单位"
            ></u-input>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item borderBottom label="工时" labelWidth="200">
            <u-input v-model="project.manHour" border="none" placeholder="请输入工时"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="备注" labelWidth="200">
            <u-input v-model="project.remark" border="none" placeholder="请输入备注"></u-input>
          </u-form-item>
          <u-form-item borderBottom label="是否自助" labelWidth="200">
            <switch v-model="project.isSelf" @change="handleSwitchChange('isSelf',project.isSelf)" style="transform:scale(0.7)"/>
          </u-form-item>
          <u-form-item borderBottom label="分店公用" labelWidth="200">
            <switch v-model="project.isPublic" @change="handleSwitchChange('isPublic',project.isPublic)" style="transform:scale(0.7)"/>
          </u-form-item>
        </view>
      </u-form>

      <!-- 单位 -->
      <u-action-sheet
          :actions="unitList"
          :show="unitType"
          title="请选择单位"
          @close="unitType = false"
          @select="unitSelect"
      >
      </u-action-sheet>
    </view>
    <view class="footer">
      <view class="btnItem edit" @click="submit">
        确定
      </view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from "@/components/VNavigationBar.vue";
import {getDictByCode, convertToDouble} from "@/utils/utils";
import request from "@/utils/request";

export default {
  components: {VNavigationBar},
  data() {
    return {
      pageTitle: '新增维修项目',
      project: {
        isPublic: 0,
        isSelf: 0
      },
      unitType: false,
      unitList: [],
      unit: '',
    };
  },
  onLoad(options) {
    console.log("options", options)
    if (options.typeId) {
      this.project.type = options.typeId
    }
    this.getDictByCode()
  },
  methods: {
    submit() {
      if (this.project.cost != null){
        this.project.cost = Math.floor(this.project.cost,)
      }
      console.log("this.project", this.project)
      request({
        url: '/admin-api/repair/project/create',
        method: 'POST',
        data: this.project,
      }).then(res => {
        if (res.code == 200) {
          // 发送事件并携带返回值
          uni.$emit('projectCreated', res.data);
          uni.navigateBack();
        } else {
          uni.showToast({
            title: '添加维修项目失败',
            icon: 'none'
          })
        }
      })
    },
    getDictByCode() {
      this.unitList = getDictByCode('repair_unit')
      this.unitList.forEach(item => {
        item.name = item.label
        item.value = item.value
      })
    },
    unitSelect(e) {
      console.log('e', e)
      this.brandId = e.value
      this.unit = e.name
      this.project.unit = e.value
    },
    costBlur(value) {
      this.project[value] = convertToDouble(this.project[value], 2)
    },
    handleSwitchChange(name, value) {
      console.log(`${name} 状态改变:`, value);
      if (value == 1) {
        value =0
      }else {
        value = 1
      }
      this.project[name] = value
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  height: 100%;
  background-color: #f3f5f7;
  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    height: 0;
    overflow: auto;

    .card {
      margin: 20rpx 30rpx;
      padding: 0 30rpx;
      background-color: #fff;
    }
  }

  .footer {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30rpx 0;

    .btnItem {
      width: 510rpx;
      height: 76rpx;
      background: #0174F6;
      border-radius: 38rpx 38rpx 38rpx 38rpx;

      font-size: 32rpx;
      color: #FFFFFF;

      line-height: 76rpx;
      text-align: center;
    }
  }
}
</style>