freight-web/src/pagesConfig/otherConfig.vue

<template>
  <block v-if="Object.keys(state.formData).length > 0">
    <view class="title">终端机自动打单配置</view>
    <view class="box">
      <view
        >自动打印设置&nbsp;&nbsp;<up-switch
          activeColor="#00D2E3"
          size="20"
          v-model="state.formData.autoPrintConfig"
        ></up-switch
      ></view>
      <view
        >收货联单打印<AvatarInput
          :min="1"
          :max="5"
          :value="state.formData.machineOrderInConfig"
          @changeValue="
            (v) => {
              console.log(v);
              state.formData.machineOrderInConfig = v;
            }
          "
        />张</view
      >
      <view
        >出货联单打印<AvatarInput
          :min="1"
          :max="5"
          :value="state.formData.machineOrderOutConfig"
          @changeValue="
            (v) => {
              state.formData.machineOrderOutConfig = v;
            }
          "
        />张</view
      >
    </view>
    <view class="title">手动打单配置（小程序端 WEB端）</view>
    <view class="box">
      <view
        >收货-待审核联单打印<AvatarInput
          :min="1"
          :max="7"
          :value="state.formData.manualPrintAudit"
          @changeValue="
            (v) => {
              state.formData.manualPrintAudit = v;
            }
          "
        />
        张</view
      >
      <view
        >收货-已审核联单打印<AvatarInput
          :min="1"
          :max="7"
          :value="state.formData.manualPrintAudited"
          @changeValue="
            (v) => {
              state.formData.manualPrintAudited = v;
            }
          "
        />
        张</view
      >
      <view
        >出货-待结算联单打印<AvatarInput
          :min="1"
          :max="7"
          :value="state.formData.manualPrintToBeSettled"
          @changeValue="
            (v) => {
              state.formData.manualPrintToBeSettled = v;
            }
          "
        />
        张</view
      >
      <view
        >出货-已结算联单打印<AvatarInput
          :min="1"
          :max="7"
          :value="state.formData.manualPrintSettled"
          @changeValue="
            (v) => {
              state.formData.manualPrintSettled = v;
            }
          "
        />
        张</view
      >
    </view>
    <view class="title">出货结算配置</view>
    <view class="box">
      <view
        >结算金额配置
        <view class="avatar-select" @click="showSelect"
          ><input v-model="list[state.formData.settlementConfig]" disabled />
          <up-icon
            name="arrow-down"
            :size="14"
            color="rgba(0,0,0,0.25)"
          ></up-icon
        ></view>
      </view>
      <view
        >自动结算配置&nbsp;&nbsp;<up-switch
          activeColor="#00D2E3"
          size="20"
          v-model="state.formData.autoSettlement"
        ></up-switch
      ></view>
      <view
        v-for="item in state.formData.devices"
        :key="item.id"
        style="padding: 8rpx 44rpx"
        >{{ item.deviceName }}
        <AvatarInput
          :min="1"
          :max="7"
          :value="item.expireConfig"
          @changeValue="
            (v) => {
              item.expireConfig = v;
            }
          "
        />
        天后自动结算</view
      >
    </view>
  </block>

  <view class="btn-box-fix-btn">
    <u-button
      type="primary"
      text="保存"
      shape="circle"
      @click="handleSave"
    ></u-button>
  </view>

  <up-action-sheet
    :actions="state.list"
    :title="'请选择'"
    :show="state.show"
    @select="selectClick"
    :closeOnClickOverlay="true"
    :closeOnClickAction="true"
  ></up-action-sheet>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import AvatarInput from "./components/avatar-input.vue";
import { OtherConfigApi } from "@/services/index";
const list = [
  "",
  "正常计算",
  "抹分",
  "抹角分",
  "抹元",
  "分位四舍五入",
  "角位四舍五入",
  "元位四舍五入",
];
const state = reactive<any>({
  show: false,
  list: [
    { id: 1, name: "正常计算" },
    { id: 2, name: "抹分" },
    { id: 3, name: "抹角分" },
    { id: 4, name: "抹元" },
    { id: 5, name: "分位四舍五入" },
    { id: 6, name: "角位四舍五入" },
    { id: 7, name: "元位四舍五入" },
  ],
  formData: {
    // autoPrintConfig: true,
    // machineOrderInConfig: 2,
    // machineOrderOutConfig: 2,
    // manualPrintAudit: 3,
    // manualPrintAudited: 3,
    // manualPrintToBeSettled: 3,
    // manualPrintSettled: 3,
    // settlementConfig: 6,
    // autoSettlement: true,
    // devices: [],
  },
});

OtherConfigApi.printdetail({}).then((res) => {
  if (res.code === 200) {
    state.formData = res.data;
  }
});
const handleSave = () => {
  OtherConfigApi.updateprintOne({ ...state.formData }).then((res) => {
    if (res.code === 200) {
      uni.showToast({
        title: "设置更新成功",
      });
    }
  });
};

const showSelect = () => {
  state.show = true;
};

const selectClick = (v:any) => {
  state.formData.settlementConfig = v.id;
  state.show = false;
};
</script>
<style lang="scss" scoped>
.title {
  font-weight: 500;
  font-size: 28rpx;
  color: #000000;
  padding: 22rpx;
  padding-left: 44rpx;
  &::before {
    content: "";
    position: absolute;
    margin-top: 3px;
    margin-left: -22rpx;
    width: 6rpx;
    height: 26rpx;
    background: #00d2e3;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
    border-radius: 3rpx;
  }
}
.box {
  padding: 0rpx 22rpx;
  font-size: 26rpx;
  > view {
    display: flex;
    align-items: center;
    padding: 8rpx 22rpx;
  }
}
.avatar-select {
  display: flex;
  align-items: center;
  justify-items: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0rpx 8rpx;
  border-radius: 5px;
  margin: 0rpx 16rpx;
}
</style>