order-ui-pc/src/views/goodStore/active/components/finance-exam-three-form.vue

<template>
  <div class="finance-exam-three-form">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rulesThis"
      ref="ruleForm"
      :size="'mini'"
      label-width="90px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="审核状态" prop="status">
            <el-select
              v-model="ruleForm.status"
              style="width: 100%"
              placeholder="审核状态"
              @change="statusChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审核备注" prop="remark">
            <el-input
              placeholder="审核备注"
              v-model="ruleForm.remark"
              maxlength="100"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button
            :size="'mini'"
            type="success"
            style="float: right"
            @click="submitForm"
          >
            批量设置状态
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      border
      tooltip-effect="dark"
      ref="multipleTable"
      :size="'mini'"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40"> </el-table-column>
      <el-table-column
        prop="skuCode"
        label="商品编码"
        show-overflow-tooltip
        width="170"
      />
      <el-table-column
        prop="good_name"
        label="商品名称"
        show-overflow-tooltip
      />
      <el-table-column prop="is_activity" label="是否使用结算单价" width="120px">
          <template slot-scope="scope">
             <span>{{scope.row.is_activity === '1' ? '是' : '否'}}</span>
          </template>
        </el-table-column>

      <el-table-column prop="settle_price" label="结算单价">
        <template slot-scope="scope">
          <span>{{scope.row.settle_price}}</span>
         </template>
     </el-table-column>
     
      <el-table-column
        prop="activity_stock"
        label="活动库存"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="moq_num"
        label="起订量"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="cost_price"
        label="成本单价(元)"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="sale_price"
        label="非活动价(元)"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="activity_price"
        label="活动价(元)"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column prop="status" label="审核状态" width="100">
        <template slot-scope="scope">
          <el-tag
            :size="'mini'"
            :type="
              scope.row.status == '0'
                ? 'warning'
                : scope.row.status == '2'
                ? 'danger'
                : ''
            "
            v-text="
              (options.find((item) => item.value == scope.row.status) || {})
                .label || '--'
            "
          ></el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="审核备注"
        width="100"
        show-overflow-tooltip
      />

      <el-table-column fixed="right" width="50">
        <template slot="header" slot-scope="scope">
          <span>操作</span>
        </template>
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="查看商品信息" placement="top">
            <i
              class="el-icon-view tb-icon"
              @click="showGoodModelFun(scope.row.skuCode)"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <set-active-price-form
      :sitem="sfinditem"
      :showModel="showModel"
      @refresh="editRefresh"
      @cancel="showModel = false"
    />
    <show-good-data-modal
      :show-model="showGoodModel"
      :skuCode="showGoodId"
      @cancel="showGoodModel = false"
    />
    <el-col
      :span="24"
      style="
        text-align: right;
        padding: 15px 0 15px 0;
        border-top: 1px solid #dcdfe6;
      "
    >
      <el-button :size="'mini'" type="primary" @click="submitTable"
        >保 存
      </el-button>
    </el-col>
  </div>
</template>
   <script>
import asyncRequest from "@/apis/service/goodStore/active";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import setActivePriceForm from "./set-active-price-form";
import showGoodDataModal from "@/components/show-good-data-modal";

export default {
  name: "financeExamOneForm",
  mixins: [resToken],
  props: ["id", "type", "sitem","newTime"],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
  },
  components: {
    setActivePriceForm,
    showGoodDataModal,
  },
  data() {
    return {
      status: "",
      ruleForm: {
        status: "1", // 通过or驳回
        remark: "",
      },
      rulesThis: this.rules,
      rules: {
        status: [
          {
            required: true,
            message: "请选择审核状态！",
            trigger: "change",
          },
        ],

        remark: [
          { required: true, message: "审核备注不能为空！", trigger: "blur" },
          {
            min: 1,
            max: 250,
            message: "长度在 1 到 250 个字符",
            trigger: "blur",
          },
        ],
      },
      options: [
        {
          value: "0",
          label: "待审核",
        },
        {
          value: "1",
          label: "通过",
        },
        {
          value: "2",
          label: "驳回",
        },
      ],
      loading: false,
      showModel: false,
      sfinditem: {},
      tableData: [],
      showGoodModel: false,
      showGoodId: "",
      multipleSelection: [],
    };
  },
   watch: {
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.loading = true;
      this.resetFormData();
      this.rulesThis = this.rules;
      await this.resetForm();
      this.statusChange();
      this.loading = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    showGoodModelFun(skuCode) {
      this.showGoodModel = true;
      this.showGoodId = skuCode;
    },
    editRefresh(e) {
      this.showModel = false;
      const { skuCode, activity_price } = JSON.parse(JSON.stringify(e));
      const aindex = this.tableData.findIndex((eis) => eis.skuCode === skuCode);
      if (aindex !== -1) {
        this.tableData[aindex].activity_price = activity_price;
        this.$set(this.tableData, aindex, this.tableData[aindex]);
      }
    },
    openModal(e) {
      this.sfinditem = JSON.parse(JSON.stringify(e));
      this.showModel = true;
    },
    statusChange() {
      this.rulesThis.remark[0].required = this.ruleForm.status === "2";
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const { status, remark } = this.ruleForm;
          if (this.multipleSelection && this.multipleSelection.length > 0) {
            this.tableData.forEach((a, ai) => {
              let findex = this.multipleSelection.findIndex(
                (b) => b.id === a.id
              );
              if (findex !== -1) {
                this.tableData[ai].status = status;
                this.tableData[ai].remark = remark;
                this.$set(this.tableData, ai, this.tableData[ai]);
              }
            });
          } else {
            this.$message.warning("请选择商品！");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetFormData() {
      this.tableData = [];
      const { info, status } = this.sitem;
      this.status = status || "";
      this.tableData =
        info && info.length > 0 ? JSON.parse(JSON.stringify(info)) : [];
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.ruleForm = {
            status: "1", // 通过or驳回
            remark: "",
          };
        }
      });
    },

    async submitTable() {
      this.loading = true;
      const { activity_code } = this.sitem;
      let ritem = {
        activity_code: activity_code || "",
        good_list: [],
      };
      let list = JSON.parse(JSON.stringify(this.tableData));
      let isok = true;
      let newlist = [];
      list.forEach((e) => {
        if (e.status !== "1" && e.status !== "2") {
          isok = false;
        }
        let item = {
          id: e.id,
          status: e.status,
          remark: e.remark,
        };
        newlist.push(item);
      });
      if (!isok) {
        this.$message.warning("部分商品未审核！");
        this.loading = false;
        return;
      }
      ritem.good_list = JSON.parse(JSON.stringify(newlist));
      let res = await asyncRequest.status(ritem);
      this.loading = false;
      if (res && res.code === 0) {
        this.$notify.success({
          title: "提交成功！",
          message: "",
        });
        // 刷新
        this.$emit("refresh", true);
      }
    },
  },
};
</script>
   <style lang="scss" scoped>
.activeAdd {
  .activeAdd-title {
    border-top: 1px solid #ebeef5;
    span {
      height: 50px;
      line-height: 50px;
      font-family: "微软雅黑", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16fpx;
      text-align: left;
    }
  }
  /deep/ .ddiv {
    border-top: 1px solid #dcdfe6;
  }
  /deep/ .dtitle {
    width: 40px;
    text-align: center;
    height: 100%;
    min-height: 100%;
    ul {
      padding: 20px 0 0 0;
    }
  }
  /deep/ .dmain {
    padding: 20px 0 0 0;
    width: calc(100% - 40px);
    border-left: 1px solid #dcdfe6;
  }
}
</style>