a
<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <el-form-item label="商品名称" prop="configName">
        <el-input
          v-model="queryParams.configName"
          placeholder="请输入商品名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="分类" prop="configName" label-width="140px">
        <el-input
          v-model="queryParams.configName"
          placeholder="请输入下单用户手机号/姓名"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="value" placeholder="请选择状态">
          <el-option :label="1" :value="1"> </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain size="mini" @click="prouctAdd"
          >新增商品</el-button
        >
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="configList">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="订单编号" align="center" prop="configId" />
      <el-table-column
        label="商品名称"
        align="center"
        prop="configName"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="单价/数量" align="center" prop="configKey" />
      <el-table-column label="实付款" align="center" prop="configValue" />
      <el-table-column label="下单时间" align="center" prop="configValue" />
      <el-table-column label="付款时间" align="center" prop="configValue" />
      <el-table-column label="买家信息" align="center" prop="configType">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column label="支付方式" align="center" prop="remark" />
      <el-table-column label="配送方式" align="center" prop="remark" />
      <el-table-column label="交易状态" align="center" prop="createTime" width="180">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['manage:order:detail']"
            >订单详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rulesRole" label-width="140px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称：" prop="configName">
              <el-input v-model="form.configName" placeholder="请输入参数名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品分类：" prop="configKey">
              <el-input v-model="form.configKey" placeholder="请输入参数键名" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品描述：" prop="configValue">
              <el-input v-model="form.configValue" placeholder="请输入参数键值" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品封面图：" prop="configKey">
              <span style="font-size: 12px">商品封面的展示</span>
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品视频：" prop="configKey">
              <span style="font-size: 12px; color: red"
                >上传视频有利于用户看的更直接</span
              >
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品图：" prop="configKey">
              <span style="font-size: 12px">可上传最多10张图</span>
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="详情图：" prop="configKey">
              <span style="font-size: 12px">可上传最多10张图</span>
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="特殊资质图：" prop="configKey">
              <span style="font-size: 12px"
                >如有特殊资质例如农产检查有机认证最多10张图</span
              >
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品价格与规格：" prop="configKey">
              <span style="color: #0fd70f">{{
                specification.length > 0 ? "已添加" + specification.length + "个规格" : ""
              }}</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

              <el-button type="text" @click="custom('specification')">添加规格</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="运费：" prop="configKey">
              <el-button type="text" @click="custom('freight')">添加运费模版</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="发货地址：" prop="configKey">
              <div style="display: flex; flex-direction: row">
                <el-cascader
                  v-model="form.area"
                  ref="myCascader"
                  placeholder="请选择城市"
                  :props="props"
                  style="width: 300px"
                  @change="(res) => araeChange(res, 'query')"
                />
                <el-input v-model="form.configKey" placeholder="请输入详细地址" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="添加商品属性：" prop="configKey">
              <el-button type="text" @click="custom('stats')">添加商品属性</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分销比例：" prop="configKey">
              <el-input
                v-model="form.configKey"
                placeholder="请输入分销比例"
                style="width: 200px"
              >
                <span slot="suffix">%</span>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 规格列表 -->
    <el-dialog
      :title="specificationTitle"
      :visible.sync="specificationOpen"
      width="700px"
      append-to-body
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="120px"
      >
        <el-form-item label="计量单位" prop="configName">
          <el-input
            v-model="queryParams.configName"
            placeholder="请选择计量单位"
            clearable
            style="width: 240px"
          />
        </el-form-item>
        <el-button
          type="primary"
          @click="specificationAdd"
          size="mini"
          style="position: absolute; right: 20px"
          >添加规格</el-button
        >
        <div style="max-height: 500px; overflow: auto">
          <el-row
            v-for="(item, index) in specification"
            :key="index"
            style="
              padding: 20px 0px;
              border: 1px solid #f1f1f1;
              border-radius: 20px;
              margin-bottom: 20px;
            "
          >
            <el-col
              :span="24"
              style="text-align: right; padding: 0px 20px; position: absolute; top: 10px"
            >
              <i
                class="el-icon-edit-outline"
                style="font-size: 26px"
                @click="specificationEdit(item)"
              ></i>
              <i
                @click="specificationRemove(item, inex)"
                class="el-icon-delete"
                style="font-size: 26px; margin-left: 10px; color: red"
              ></i>
            </el-col>

            <el-col :span="12">
              <el-form-item label="规格名称：" prop="configName">
                {{ item.name }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格内容：" prop="configName">
                {{ item.contont }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="库存：" prop="configName">
                {{ item.inventory }} 斤
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起批量：" prop="configName">
                {{ item.starting }}斤
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="批发价：" prop="configName">
                {{ item.wholesale }}元/斤
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="商品单价：" prop="configName">
                {{ item.wholesale }}元/斤
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button @click="specificationOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="subTitle" :visible.sync="subOpen" width="700px" append-to-body>
      <el-form
        :model="rules"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="80px"
      >
        <el-row v-if="subType == 'specification'">
          <el-col :span="12">
            <el-form-item label="规格名称" prop="name">
              <el-input
                v-model="rules.specification.name"
                placeholder="请输入规格名称"
                clearable
                style="width: 240px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格内容" prop="contont">
              <el-input
                v-model="rules.specification.contont"
                placeholder="请输入规格内容"
                clearable
                style="width: 240px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库存" prop="inventory">
              <el-input
                v-model="rules.specification.inventory"
                placeholder="请输入库存"
                clearable
                style="width: 240px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="起批量" prop="starting">
              <el-input
                v-model="rules.specification.starting"
                placeholder="请输入起批量"
                clearable
                style="width: 240px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="批发价" prop="wholesale">
              <el-input
                v-model="rules.specification.wholesale"
                placeholder="请输入批发价"
                clearable
                style="width: 240px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品单价" prop="configName">
              {{ rules.wholesale ? rules.wholesale + "元/斤" : "" }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="subType == 'freight'">
          <el-col :span="24">
            <el-form-item label="运费模版名称" prop="configName" label-width="130px">
              <el-input
                v-model="queryParams.configName"
                placeholder="请输入运费模版名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="小于商品金额" prop="configName" label-width="130px">
              <el-input
                v-model="queryParams.configName"
                placeholder="请输入商品金额"
                style="with: 100px"
                clearable
              />
            </el-form-item>
            <el-form-item label="运费" prop="configName">
              <el-input
                style="with: 100px"
                v-model="queryParams.configName"
                placeholder="请输入运费"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="大于等于商品金额" prop="configName" label-width="130px">
              <div style="width: 200px; display: flex; flex-direction: row">
                <el-input
                  v-model="queryParams.configName"
                  placeholder="请输入起批量"
                  clearable
                />
                <div style="width: 100px; margin-left: 5px">元免运费</div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="subType == 'stats'">
          <el-col :span="24" style="text-align: right; position: absolute; top: -40px">
            <el-button type="primary" @click="productAdd" size="mini"
              >自定义添加</el-button
            ></el-col
          >
          <el-col :span="24">
            <el-form-item label="包装方式" prop="configName" label-width="100px">
              <el-select v-model="rules.stats.packing" placeholder="请选择包装方式">
                <el-option label="纸箱装" value="1"> </el-option>
                <el-option label="礼盒装" value="2"> </el-option>
                <el-option label="胶框装" value="3"> </el-option>
                <el-option label="泡沫箱装" value="4"> </el-option>
                <el-option label="袋装" value="5"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="发货时间" prop="configName" label-width="100px">
              <el-radio-group
                v-model="rules.stats.deliveryTime"
                style="width: 500px; line-height: 30px"
              >
                <el-radio
                  :label="item.value"
                  v-for="(item, index) in deliveryTimes"
                  :key="index"
                >
                  {{ item.label }}
                  <span
                    v-if="item.type == 'add'"
                    style="color: red"
                    @click="removeRadio(index)"
                    >删除</span
                  >
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="rules.stats.deliveryTime == 99">
            <el-form-item label="自定义添加" prop="configName" label-width="100px">
              <div style="margin-left: 20px">
                <el-input
                  v-model="optionTime"
                  placeholder="请输入自定义发货时间"
                  clearable
                  style="width: 200px"
                />
                <span style="margin-left: 5px" @click="addOption">确定</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="costumSubmit">确 定</el-button>
        <el-button @click="subOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listConfig, getConfig, delConfig, refreshCache } from "@/api/system/config";

export default {
  name: "Config",
  //   dicts: ["sys_yes_no"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 参数表格数据
      configList: [],
      // 弹出层标题
      title: "",
      subTitle: "",
      // 是否显示弹出层
      open: false,
      subOpen: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验

      props: {
        lazy: true,
        lazyLoad: this.lazyLoad,
      },
      specification: [],
      freight: [],
      subType: "",
      specificationOpen: false,
      specificationTitle: "",
      rules: {
        specification: {
          name: "",
          contont: "",
          inventory: "",
          starting: "",
          wholesale: "",
        },
        stats: {
          packing: "",
          deliveryTime: "",
        },
      },
      deliveryTimes: [
        {
          label: "付款24小时",
          value: "1",
        },
        {
          label: "付款36小时",
          value: "2",
        },
        {
          label: "付款48小时",
          value: "3",
        },
        {
          label: "自定义",
          value: "99",
        },
      ],
      optionTime: "",
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    addOption() {
      if (this.optionTime) {
        this.deliveryTimes.push({
          label: this.optionTime,
          value: this.deliveryTimes.length,
          type: "add",
        });
        this.deliveryTimes.sort(function (a, b) {
          return a.value - b.value;
        });
        this.optionTime = "";
      }
    },
    removeRadio(index) {
      this.deliveryTimes.splice(index, 1);
    },
    specificationAdd() {
      for (const key in this.rules.specification) {
        this.rules.specification[key] = "";
      }
      this.subTitle = "自定义添加规格";
      this.subOpen = true;
    },
    specificationRemove(record, index) {
      this.specification.splice(index, 1);
    },
    specificationEdit(record) {
      this.subTitle = "编辑规格";
      this.subOpen = true;
      this.specification = record;
    },
    custom(type) {
      this.subType = type;
      if (type == "specification") {
        this.specificationOpen = true;
        this.specificationTitle = "自定义规格";
      } else if (type == "freight") {
        this.subTitle = "自定义运费模版";
        this.subOpen = true;
      } else if (type == "stats") {
        this.subTitle = "添加商品属性";
        this.subOpen = true;
      }
    },
    costumSubmit() {
      console.log(this.rules);
      this.subOpen = false;
      this.specification.push(this.rules.specification);
      console.log(this.specification);
    },

    /** 查询参数列表 */
    getList() {
      this.loading = true;
      listConfig(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
        this.configList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        configId: undefined,
        configName: undefined,
        configKey: undefined,
        configValue: undefined,
        configType: "Y",
        remark: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /**
     * 新增商品
     */
    prouctAdd() {
      this.title = "添加商品";
      this.open = true;
    },
    lazyLoad(node, resolve) {
      let level = node.level;
      console.log(level);
      if (!node.data) {
        this.getCity().then((res) => {
          //接口
          const nodes = Array.from(res.data).map((item, index) => ({
            value: item.cityId,
            label: `${item.name}`,
            leaf: level >= 2,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else if (level == 1) {
        this.getCity({ parentCityId: node.data.value }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.cityId,
            label: `${item.name}`,
            leaf: level >= 2,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      } else if (level == 2) {
        // resolve({});
        this.getCity({ parentCityId: node.data.value }).then((res) => {
          const nodes = Array.from(res.data).map((item) => ({
            value: item.cityId,
            label: `${item.name}`,
            leaf: level >= 1,
          }));
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes);
        });
      }
    },
  },
};
</script>
<style>
.el-form-item {
  margin-bottom: 10px;
}
.el-upload--picture-card {
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
