udiwms-vue-frame/src/views/basic/collectPoint/timerSetting.vue

<template>
  <div>
    <el-card>
      <el-form :model="formData" :rules="formRules" label-width="160px" ref="dataForm">

        <el-button-group style="display: flex;margin: 0px 0 10px 90%; ">
          <el-button type="primary" @click.native="saveTest()">测试货架组件</el-button>
          <el-button type="primary" @click.native="save()">保存</el-button>
        </el-button-group>

        <el-collapse v-model="activeNames">

          <el-collapse-item name="0">
            <template slot="title">
              <p class="form-title">原始单据下载设置</p>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" class="el-col">
                <el-form-item label="开启单据自动下载:" prop="autoDownload" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.autoDownload">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="el-col">
                <el-form-item label="起始下载时间:" prop="startDownloadTime" label-width="160px">
                  <el-date-picker
                    v-model="formData.startDownloadTime"
                    type="datetime"
                    placeholder="请输入起始下载时间"
                    style="width: 90%"
                    :clearable="false"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>

            </el-row>
          </el-collapse-item>
          <el-collapse-item name="1">
            <template slot="title">
              <p class="form-title">原始单据处理设置</p>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" class="el-col">
                <el-form-item label="自动转成待处理单据:" prop="autoDealOrder" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.autoDealOrder">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>

          <el-collapse-item name="2">
            <template slot="title">
              <p class="form-title">单据处理设置</p>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" class="el-col">
                <el-form-item label="待处理单据自动分配:" prop="autoAllotOrder" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.autoAllotOrder">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="el-col">
                <el-form-item label="单据自动完成:" prop="autoFinishOrder" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.autoFinishOrder">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              <p class="form-title">单据上传设置</p>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" class="el-col">
                <el-form-item label="已完成单据自动上传:" prop="autoUploadOrder" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.autoUploadOrder">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="el-col">
                <el-form-item label="起始上传时间:" prop="startUploadTime" label-width="160px">
                  <el-date-picker
                    v-model="formData.startUploadTime"
                    type="datetime"
                    placeholder="请输入起始上传时间"
                    style="width: 90%"
                    :clearable="false"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              <p class="form-title">拆零设置</p>
            </template>
            <el-row :gutter="20">
              <el-col :span="8" class="el-col">
                <el-form-item label="是否最后追溯码拆零:" prop="lastCodeSplit" style="margin-bottom: 0">
                  <el-radio-group v-model="formData.lastCodeSplit">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>


        <el-dialog
          title="测试组件"
          :visible.sync="ShelfDisplayFlag"
          width="75%"
          v-if="ShelfDisplayFlag"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
        >
          <ShelfDisplay
            :shelfData="this.shelfData"
            @slot-click="handleSlotClick"
          >
          </ShelfDisplay>
        </el-dialog>


      </el-form>
    </el-card>
  </div>
</template>

<script>

import {getSet, updateSet} from "@/api/collect/collectSet";
import ShelfDisplay from "@/components/ShelfDisplay";

export default {
  name: 'timerSetting',
  data() {
    return {
      ShelfDisplayFlag: false,
      shelfData:[
        {
          row: 1,
          height: 50,
          slots: [
            { id: 1, item: 'Item A1' },
            { id: 2, item: 'Item A2' },
            { id: 3, item: 'Item 3' },
            { id: 4, item: 'Item 4' },
          ]
        },
        {
          row: 2,
          height: 80,
          slots: [
            { id: 1, item: 'Item B1' },
            { id: 2, item: 'Item B2' },
            { id: 3, item: 'Item 3' },
            { id: 4, item: 'Item 4' },
            { id: 5, item: 'Item 3' },
          ]
        },
        {
          row: 3,
          height: 80,
          slots: [
            { id: 1, item: 'Item B1' },
            { id: 2, item: 'Item B2' },
            { id: 3, item: 'Item 3' },
            { id: 4, item: 'Item 4' },
            { id: 5, item: 'Item 3' },
          ]
        },
        {
          row: 6,
          height: 80,
          slots: [
            { id: 1, item: 'Item B1' },
            { id: 2, item: 'Item B2' },
            { id: 3, item: 'Item 3' },
            { id: 4, item: 'Item 4' },
            { id: 5, item: 'Item 3' },
            { id: 5, item: 'Item 3' },
            { id: 5, item: 'Item 3' },
            { id: 5, item: 'Item 3' },
            { id: 5, item: 'Item 3' },
            { id: 5, item: 'Item 3' },
          ]
        },
        {
          row: 5,
          height: 200,
          slots: [
            { id: 1, item: 'Item B1' },
            { id: 2, item: 'Item B2' },
          ]
        },
        {
          row: 4,
          height: 80,
          slots: [
            { id: 1, item: 'Item B1' },
            { id: 2, item: 'Item B2' },
            { id: 3, item: 'Item 3' },
            { id: 4, item: 'Item 4' },
            { id: 5, item: 'Item 3' },
          ]
        },
      ],
      activeNames: ['0', '1', '2', '3'],
      formData: {
        startDownloadTime: null,
        lastCodeSplit: true
      },
      systemParam: null,

    }
  },
  components:{
    ShelfDisplay
  },
  methods: {
    handleSlotClick(slot) {
      // 在这里处理被点击的货位信息
      console.log('被点击的货位:', slot);
      // 你可以根据需要执行其他操作，例如更新父组件的状态或导航到另一个
    },
      selectSysParam() {
      getSet().then((response) => {
        if (response.code == 20000) {
          this.formData = response.data
        }
      })
    },
    saveTest(){
      this.ShelfDisplayFlag = true
    },
    save() {
      updateSet(this.formData)
        .then((response) => {
          if (response.code != 20000) {
            this.$message.error(response.message);
          } else
            this.$message.success("操作成功");
        })
        .catch(() => {
        });
    }
  },
  created() {
    this.selectSysParam()

  }

}
</script>

<style scoped>
.form-title {
  font-size: 16px;
  font-family: Noto Sans SC;
  font-weight: bold;
  color: #303133;
  padding-bottom: 17px;
  padding-top: 17px;
}

</style>